From 0f6628a753149a651ecd224f9057476b07b6741f Mon Sep 17 00:00:00 2001 From: Chito Wong Date: Sun, 28 Dec 2025 14:28:19 +0800 Subject: [PATCH 1/3] #295 Fix safe area inset issue in iOS/iPadOS Home Screen web app mode --- runtime-demo/src/components/app-root.module.css | 5 +++++ runtime-demo/src/components/app-root.tsx | 3 ++- src/components/app-root.module.css | 4 ++++ src/components/app-root.tsx | 3 ++- src/components/menu/nav-menu.module.css | 4 ++-- src/components/workspace/app-container.tsx | 9 ++++++++- src/components/workspace/workspace.module.css | 4 ++++ src/index.css | 15 ++++++++------- src/util/asset-enablements.ts | 2 ++ 9 files changed, 37 insertions(+), 12 deletions(-) create mode 100644 runtime-demo/src/components/app-root.module.css diff --git a/runtime-demo/src/components/app-root.module.css b/runtime-demo/src/components/app-root.module.css new file mode 100644 index 0000000..d6a23fc --- /dev/null +++ b/runtime-demo/src/components/app-root.module.css @@ -0,0 +1,5 @@ +.body { + padding-inline: var(--mantine-spacing-xs); + padding-bottom: max(env(safe-area-inset-bottom), var(--mantine-spacing-xs)); + overflow-y: auto; +} diff --git a/runtime-demo/src/components/app-root.tsx b/runtime-demo/src/components/app-root.tsx index a09c5c4..a668e9b 100644 --- a/runtime-demo/src/components/app-root.tsx +++ b/runtime-demo/src/components/app-root.tsx @@ -1,3 +1,4 @@ +import classes from './app-root.module.css'; import WindowHeader from './window-header'; import FontsDemo from './fonts-demo'; import MetadataDemo from './metadata-demo'; @@ -10,7 +11,7 @@ export default function AppRoot() { - + diff --git a/src/components/app-root.module.css b/src/components/app-root.module.css index f45da31..3b40fbc 100644 --- a/src/components/app-root.module.css +++ b/src/components/app-root.module.css @@ -1,3 +1,7 @@ +.root { + padding-top: env(safe-area-inset-top); +} + .burger { position: absolute; height: 40px; diff --git a/src/components/app-root.tsx b/src/components/app-root.tsx index 1b806ad..2b2b35d 100644 --- a/src/components/app-root.tsx +++ b/src/components/app-root.tsx @@ -15,6 +15,7 @@ import TerminationModal from './modal/termination-modal'; import { RMPage, RMWindow } from '@railmapgen/mantine-components'; import { ActionIcon } from '@mantine/core'; import Notifications from './notifications/notifications'; +import clsx from 'clsx'; export default function AppRoot() { const { t } = useTranslation(); @@ -37,7 +38,7 @@ export default function AppRoot() { return ( - + tab.url ?? '/' + tab.app + '/', [tab.app]); return ( -
+