Merge pull request #591 from ironcalc/dani/app/mobile-adjustments

fix: mobile issues in app

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;
+export 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

@@ -3,6 +3,7 @@ import type { Model } from "@ironcalc/workbook";
 import { IconButton, Tooltip } from "@mui/material";
 import { CloudOff, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useLayoutEffect, useRef, useState } from "react";
+import { MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE } from "../App";
 import { FileMenu } from "./FileMenu";
 import { HelpMenu } from "./HelpMenu";
 import { downloadModel } from "./rpc";
@@ -77,7 +78,7 @@ export function FileBar(properties: {
           {properties.isDrawerOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
         </DrawerButton>
       </Tooltip>
-      {width > 440 && (
+      {width > MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE && (
         <FileMenu
           newModel={properties.newModel}
           newModelFromTemplate={properties.newModelFromTemplate}
@@ -92,7 +93,7 @@ export function FileBar(properties: {
           onDelete={properties.onDelete}
         />
       )}
-      {width > 440 && <HelpMenu />}
+      {width > MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE && <HelpMenu />}
       <WorkbookTitleWrapper>
         <WorkbookTitle
           name={properties.model.getName()}
@@ -112,7 +113,8 @@ export function FileBar(properties: {
               <div style={{ fontWeight: "bold" }}>{cloudWarningText2}</div>
             </div>
           }
-          placement="bottom-start"
+          placement="bottom"
+          enterTouchDelay={0}
           enterDelay={500}
           slotProps={{
             popper: {