немного перпеписана логика перехода в адаптивный режим, теперь осуществляется проверка на ориентацию утройства

src/App.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import './App.css';
-import { ContextWindowHeight } from './components/contextWindowHeight';
+import { ContextWindowHeightOrientation } from './components/contextWindowHeight';
 import { MainScreen } from './components/mainScreen/mainScreen';
 
 function App() {
   // const [windowHeight, setWindowHeight] = useState<number>(window.screen.availHeight); - не робит на iphone
   const [windowHeight, setWindowHeight] = useState<number>(window.visualViewport.height);
+  const [isLandscape, setIsLandscape] = useState<boolean>(window.orientation !== 0);
   const [currentOrientaton, setCurrentOrientaton] = useState<number>(window.orientation);
   
 
@@ -14,13 +15,18 @@ function App() {
     setWindowHeight(e.currentTarget.height);
   }
  
-  // !!! работает на свойстве помеченном как deprecate - на айфоне иначе хз как
+  // !!! работает на свойстве помеченном как deprecated - на айфоне иначе хз как
   window.onorientationchange = e => {
     //@ts-ignore
     let angle = e.target.orientation;
     if(currentOrientaton !== angle) {
       setCurrentOrientaton(angle);
     }
+    if(angle !== 0) {
+      setIsLandscape(true);
+    } else {
+      setIsLandscape(false);
+    }
   }
 
   useEffect(() => {
@@ -36,9 +42,9 @@ function App() {
 
   return (
     <div className="App">
-      <ContextWindowHeight.Provider value={windowHeight}>
+      <ContextWindowHeightOrientation.Provider value={{windowHeight: windowHeight, isLandscape: isLandscape}}>
         <MainScreen />
-      </ContextWindowHeight.Provider>
+      </ContextWindowHeightOrientation.Provider>
     </div>
   );
 }

src/components/contextWindowHeight.ts

@@ -1,3 +1,6 @@
 import React from "react";
 
-export const ContextWindowHeight = React.createContext(window.screen.availHeight);
+export const ContextWindowHeightOrientation = React.createContext({
+    windowHeight: window.screen.availHeight,
+    isLandscape: window.orientation !== 0
+});

src/components/mainScreen/mainScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { CSSTransition } from "react-transition-group";
-import { ContextWindowHeight } from "../contextWindowHeight";
+import { ContextWindowHeightOrientation } from "../contextWindowHeight";
 import './mainScreen.css';
 import { MobileAddPart } from "./mobileAddPart/mobileAddPart";
 import { PushMessage } from "./pushMessage/pushMessage";
@@ -21,7 +21,7 @@ export const MainScreen:React.FC = React.memo(() => {
         setShowMobileLangSelectorPart,
         setShowMobileSharePart
     ]
-    const windowHeight = useContext(ContextWindowHeight);
+    const {windowHeight, isLandscape} = useContext(ContextWindowHeightOrientation);
 
     function onClickToolbar() {
         setShowToolbar(!showToolbar);
@@ -139,7 +139,7 @@ export const MainScreen:React.FC = React.memo(() => {
             />
         </CSSTransition>
         {
-            windowHeight < 700?
+            windowHeight < 700 && isLandscape?
             <>
                 <CSSTransition
                     in={showMobileUsersPart}

src/components/mainScreen/toolbar/buttonContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from "react";
 import { CSSTransition } from "react-transition-group";
-import { ContextWindowHeight } from "../../contextWindowHeight";
+import { ContextWindowHeightOrientation } from "../../contextWindowHeight";
 import { ControlButton } from "./controlButton";
 import { ToolbarButton } from "./toolbarButton";
 import { BorderLine } from "./toolbarButtonContainerBorderLine";
@@ -24,7 +24,7 @@ type TProps = {
 }
 
 export const ButtonContainer:React.FC<TProps> = React.memo((props) => { 
-    const windowHeight = useContext(ContextWindowHeight);
+    const {windowHeight, isLandscape} = useContext(ContextWindowHeightOrientation);
     // const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
     const controlStates = ['default', 'questing', 'return', 'questing'];// temp
     const [currentControlState, setCurrentControlState] = useState<number>(0); // temp

src/components/mainScreen/toolbar/toolbar.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { ContextWindowHeight } from "../../contextWindowHeight";
+import { ContextWindowHeightOrientation } from "../../contextWindowHeight";
 import { ButtonContainer } from "./buttonContainer";
 import { ToolbarButton } from "./toolbarButton";
 import { CaptionToolbarButtons } from "./typeCaptionButtons";
@@ -17,7 +17,7 @@ type TProps = {
 }
 
 export const Toolbar:React.FC<TProps> = React.memo((props) => {
-    const windowHeight = useContext(ContextWindowHeight);
+    const {windowHeight, isLandscape} = useContext(ContextWindowHeightOrientation);
     const [showAddButtonsContOnDekstop, setShowAddButtonsContOnDekstop] = useState<boolean>(false);
     const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
 
@@ -25,7 +25,7 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
         setShowAddButtonsContOnDekstop(!showAddButtonsContOnDekstop);
     }
 
-    if(windowHeight < 700) {
+    if(windowHeight < 700 && isLandscape) {
         return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
             <div className="toolbar-field">
                 <div className="toolbar-field-part">