From 6056b8f122a5dd607086ae160f7889de8fcd1409 Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Wed, 26 Nov 2025 00:01:12 +0100
Subject: [PATCH 1/2] fix: mobile issues

---
 webapp/app.ironcalc.com/frontend/src/App.tsx        | 13 ++++++++-----
 .../frontend/src/components/FileBar.tsx             |  7 ++++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/webapp/app.ironcalc.com/frontend/src/App.tsx b/webapp/app.ironcalc.com/frontend/src/App.tsx
index 0c8f4f9..2c6c000 100644
--- a/webapp/app.ironcalc.com/frontend/src/App.tsx
+++ b/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) {
diff --git a/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx b/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
index 4fe4ac8..7ce46b3 100644
--- a/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
+++ b/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: {

From 167d169f1a37c3b831ce017769e47bf3093de0ad Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Wed, 26 Nov 2025 00:44:06 +0100
Subject: [PATCH 2/2] chore: use a constant instead of a number

---
 webapp/app.ironcalc.com/frontend/src/App.tsx                | 2 +-
 webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/webapp/app.ironcalc.com/frontend/src/App.tsx b/webapp/app.ironcalc.com/frontend/src/App.tsx
index 2c6c000..2e5bae6 100644
--- a/webapp/app.ironcalc.com/frontend/src/App.tsx
+++ b/webapp/app.ironcalc.com/frontend/src/App.tsx
@@ -227,7 +227,7 @@ const Wrapper = styled("div")`
 `;
 
 const DRAWER_WIDTH = 264;
-const MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE = 768;
+export const MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE = 768;
 
 const MainContent = styled("div")<{ isDrawerOpen: boolean }>`
   margin-left: ${({ isDrawerOpen }) =>
diff --git a/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx b/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
index 7ce46b3..5b67142 100644
--- a/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
+++ b/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 > 768 && (
+      {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 > 768 && <HelpMenu />}
+      {width > MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE && <HelpMenu />}
       <WorkbookTitleWrapper>
         <WorkbookTitle
           name={properties.model.getName()}