добавлена обработка safe-зон для нормального отображения приложения

public/index.html

@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.css

@@ -3,7 +3,5 @@
 
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   -webkit-tap-highlight-color: transparent;  
-
-  /* padding: env(20px) env(44px) env(20px) env(44px); */
 }
 

src/App.tsx

@@ -4,26 +4,37 @@ import { ContextWindowHeight } from './components/contextWindowHeight';
 import { MainScreen } from './components/mainScreen/mainScreen';
 
 function App() {
-  // const [windowHeight, setWindowHeight] = useState<number>(window.screen.availHeight);
+  // const [windowHeight, setWindowHeight] = useState<number>(window.screen.availHeight); - не робит на iphone
   const [windowHeight, setWindowHeight] = useState<number>(window.visualViewport.height);
+  const [currentOrientaton, setCurrentOrientaton] = useState<number>(window.orientation);
   
-  // window.addEventListener('resize', e => {
-  //   //@ts-ignore
-  //   setWindowHeight(e.currentTarget.screen.availHeight)
-  // })
 
   window.visualViewport.addEventListener('resize', (e) => {
     //@ts-ignore
     setWindowHeight(e.currentTarget.height, windowHeight)
   })
 
+ 
+
+  window.addEventListener('orientationchange', e => { // !!! работает на свойстве помеченном как deprecate - на айфоне иначе хз как
+    //@ts-ignore
+    let angle = e.target.orientation as number;
+    if(currentOrientaton !== angle) {      
+      setCurrentOrientaton(angle);
+    }
+    return
+  })
+
   useEffect(() => {
-    // alert(navigator.userAgent.includes('iPhone'))
-    // alert(window.visualViewport.height + '\n' + windowHeight)
-  }, [])
-    
-
-  
+    if(!navigator.userAgent.includes('iPhone')) {
+      return;
+    }
+    if(currentOrientaton === 90) {
+      document.querySelector('body').style['paddingLeft'] = 'env(safe-area-inset-left)'
+    } else if(currentOrientaton === -90) {
+      document.querySelector('body').style['paddingLeft'] = '0'
+    }
+  }, [currentOrientaton]);
 
   return (
     <div className="App">

src/components/mainScreen/mobileAddPart/mobileAddPart.css

@@ -1,3 +1,9 @@
+.mobile-users-part-container-help {
+    width: 100%;
+    
+    /* padding-right: env(safe-area-inset-right); */
+}
+
 .mobile-users-part {
     position: relative;
     width: 100%;
@@ -9,6 +15,9 @@
     color: #FFFFFF;
     box-sizing: border-box;
     background-color: #333333;
+
+    padding-right: 48px;
+    
 }
 
 .border-line {

src/components/mainScreen/mobileAddPart/mobileAddPart.tsx

@@ -20,7 +20,8 @@ type TProps = {
 }
 
 export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
-    return <div className="mobile-users-part">
+    return <div className="mobile-users-part-container-help">
+        <div className="mobile-users-part">
             <MobileAddPartHeader
                 onClick={props.onClickClose}
                 title={props.title}
@@ -48,4 +49,5 @@ export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
                 : null
             }        
         </div>
+    </div>
 })

src/components/mainScreen/toolbar/toolbar.css

@@ -47,18 +47,20 @@
     z-index: 0;
     position: absolute;
     top: calc((100% - 128px) / 2);
-    left: calc(100% - 4px);
+    left: calc(100% - 7px);
     
     display: flex;
     justify-content: center;
     align-items: center;
 
-    width: 24px;
+    width: 32px;
     height: 128px;
     border: none;
     background: url('openToolbarBackIcon.svg') 50% 50% no-repeat;
     background-size: 100% 100%;
 
+    /* background-color: #2F80ED; */
+
     cursor: pointer;
 }
 
@@ -66,7 +68,6 @@
     width: 24px;
     height: 24px;
     background: url('pointerIcon.svg') 50% 50% no-repeat;
-    background-size: 24px 24px;
 }
 
 .toolbar-container.opened .toolbar-open-button-icon {
@@ -501,4 +502,53 @@
     .control-button {
         height: 44px;
     }
+
+    .show-toolbar-enter {
+        transform: translateX(-60px);
+    }
+    
+    .show-toolbar-enter-done {
+        transform: translateX(0px);
+    }
+
+    .show-toolbar-enter-active {
+        transform: translateX(0px);
+        transition: .3s;
+    }
+    
+    .show-toolbar-exit {
+        transform: translateX(0);
+    }
+    
+    .show-toolbar-exit-active {
+        transform: translateX(-60px);
+        transition: .3s;
+    }        
+    
+    .show-toolbar-exit-done {
+        transform: translateX(-60px);
+    }
+
+
+    .show-toolbar-enter .toolbar-field {
+        opacity: 0;
+    }
+    
+    .show-toolbar-enter-done .toolbar-field {
+        opacity: 1;
+    }
+
+    .show-toolbar-enter-active .toolbar-field {
+        opacity: 1;
+        transition: .3s;
+    }
+
+    .show-toolbar-exit-active .toolbar-field {
+        opacity: 0;
+        transition: .3s;
+    }
+
+    .show-toolbar-exit-done .toolbar-field {
+        opacity: 0;        
+    }
 }

src/index.css

@@ -5,6 +5,11 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #333333;
+  box-sizing: border-box;
+  padding-left: env(safe-area-inset-left);
+  /* padding-right: env(safe-area-inset-right); */
+  padding-top: env(safe-area-inset-top);
 }
 
 code {