sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile issues

Browse Source
This commit is contained in:
Daniel
2025-11-26 00:01:12 +01:00
parent e61b15655a
commit 6056b8f122
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
webapp/app.ironcalc.com/frontend/src/App.tsx
View File

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

7
webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
View File

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