fix: mobile issues

webapp/app.ironcalc.com/frontend/src/App.tsx

@@ -227,16 +227,19 @@ const Wrapper = styled("div")`
 `;
 
 const DRAWER_WIDTH = 264;
-const MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE = 440;
+const MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE = 768;
 
 const MainContent = styled("div")<{ isDrawerOpen: boolean }>`
-  margin-left: ${({ isDrawerOpen }) => (isDrawerOpen ? "0px" : `-${DRAWER_WIDTH}px`)};
-  width: ${({ isDrawerOpen }) => (isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : "100%")};
+  margin-left: ${({ isDrawerOpen }) =>
+    isDrawerOpen ? "0px" : `-${DRAWER_WIDTH}px`};
+  width: ${({ isDrawerOpen }) =>
+    isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : "100%"};
   display: flex;
   flex-direction: column;
   position: relative;
   @media (max-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px) {
-    ${({ isDrawerOpen }) => isDrawerOpen && `min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px;`}
+    ${({ isDrawerOpen }) =>
+      isDrawerOpen && `min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px;`}
   }
 `;
 
@@ -247,7 +250,7 @@ const MobileOverlay = styled("div")`
   right: 0;
   bottom: 0;
   background-color: rgba(255, 255, 255, 0.8);
-  z-index: 1;
+  z-index: 100;
   cursor: pointer;
 
   @media (min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE + 1}px) {

webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx

@@ -77,7 +77,7 @@ export function FileBar(properties: {
           {properties.isDrawerOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
         </DrawerButton>
       </Tooltip>
-      {width > 440 && (
+      {width > 768 && (
         <FileMenu
           newModel={properties.newModel}
           newModelFromTemplate={properties.newModelFromTemplate}
@@ -92,7 +92,7 @@ export function FileBar(properties: {
           onDelete={properties.onDelete}
         />
       )}
-      {width > 440 && <HelpMenu />}
+      {width > 768 && <HelpMenu />}
       <WorkbookTitleWrapper>
         <WorkbookTitle
           name={properties.model.getName()}
@@ -112,7 +112,8 @@ export function FileBar(properties: {
               <div style={{ fontWeight: "bold" }}>{cloudWarningText2}</div>
             </div>
           }
-          placement="bottom-start"
+          placement="bottom"
+          enterTouchDelay={0}
           enterDelay={500}
           slotProps={{
             popper: {