добавлена обработка 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

@@ -2,8 +2,6 @@
   font-family: inter;
 
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  -webkit-tap-highlight-color: transparent;
-
-  /* padding: env(20px) env(44px) env(20px) env(44px); */
+  -webkit-tap-highlight-color: transparent;  
 }
 

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);
-
-  // window.addEventListener('resize', e => {
-  //   //@ts-ignore
-  //   setWindowHeight(e.currentTarget.screen.availHeight)
-  // })
+  const [currentOrientaton, setCurrentOrientaton] = useState<number>(window.orientation);
+  
 
   window.visualViewport.addEventListener('resize', (e) => {
     //@ts-ignore
     setWindowHeight(e.currentTarget.height, windowHeight)
   })
 
-  useEffect(() => {
-    // alert(navigator.userAgent.includes('iPhone'))
-    // alert(window.visualViewport.height + '\n' + windowHeight)
-  }, [])
-    
+ 
 
-  
+  window.addEventListener('orientationchange', e => { // !!! работает на свойстве помеченном как deprecate - на айфоне иначе хз как
+    //@ts-ignore
+    let angle = e.target.orientation as number;
+    if(currentOrientaton !== angle) {      
+      setCurrentOrientaton(angle);
+    }
+    return
+  })
+
+  useEffect(() => {
+    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,32 +20,34 @@ type TProps = {
 }
 
 export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
-    return <div className="mobile-users-part">
-        <MobileAddPartHeader
-            onClick={props.onClickClose}
-            title={props.title}
-            isBackButton={props?.isContainBack}
-            onClickBackButton={props?.onClickBackButton}
-        />
-        <BorderLine />        
-        {
-            props.type === 'users'
-            ? <UsersList />
-            : props.type === 'other'
-            ? <SettingButtons 
-                type="other"
-                onClickChangeLang={props.onClickChangeLang}
-                onClickShare={props.onClickShare}
-                onClickExit={props.onClickExit}
+    return <div className="mobile-users-part-container-help">
+        <div className="mobile-users-part">
+            <MobileAddPartHeader
+                onClick={props.onClickClose}
+                title={props.title}
+                isBackButton={props?.isContainBack}
+                onClickBackButton={props?.onClickBackButton}
             />
-            : props.type === 'selectLang'
-            ? <SettingButtons
-                type="selectLang"
-                onClickSelectLang={props.onClickSelectLang}
-            />
-            : props.type === 'share'
-            ? <ShareContainer />
-            : null
-        }        
+            <BorderLine />        
+            {
+                props.type === 'users'
+                ? <UsersList />
+                : props.type === 'other'
+                ? <SettingButtons 
+                    type="other"
+                    onClickChangeLang={props.onClickChangeLang}
+                    onClickShare={props.onClickShare}
+                    onClickExit={props.onClickExit}
+                />
+                : props.type === 'selectLang'
+                ? <SettingButtons
+                    type="selectLang"
+                    onClickSelectLang={props.onClickSelectLang}
+                />
+                : props.type === 'share'
+                ? <ShareContainer />
+                : null
+            }        
+        </div>
     </div>
 })

src/components/mainScreen/toolbar/toolbar.css

@@ -22,7 +22,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    align-items: center;
+    align-items: center;    
 }
 
 .toolbar-field-part {
@@ -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 {