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 ? : }
- {width > 440 && (
+ {width > 768 && (
)}
- {width > 440 && }
+ {width > 768 && }
{cloudWarningText2}
}
- placement="bottom-start"
+ placement="bottom"
+ enterTouchDelay={0}
enterDelay={500}
slotProps={{
popper: {