#295 Fix safe area inset issue in iOS/iPadOS Home Screen web app mode

package.json

@@ -7,43 +7,43 @@
     },
     "license": "GPL-3.0-only",
     "dependencies": {
-        "@mantine/core": "^8.3.8",
-        "@mantine/hooks": "^8.3.8",
-        "@railmapgen/mantine-components": "^0.1.27",
+        "@mantine/core": "^8.3.10",
+        "@mantine/hooks": "^8.3.10",
+        "@railmapgen/mantine-components": "^0.1.29",
         "@railmapgen/rmg-runtime": "^12.0.4",
         "@railmapgen/rmg-translate": "^3.4.4",
-        "@reduxjs/toolkit": "^2.10.1",
+        "@reduxjs/toolkit": "^2.11.2",
         "clsx": "^2.1.1",
-        "react": "^19.2.0",
-        "react-dom": "^19.2.0",
-        "react-i18next": "^16.3.3",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "react-i18next": "^16.5.0",
         "react-icons": "^5.5.0",
         "react-redux": "^9.2.0",
-        "react-router-dom": "^7.9.6"
+        "react-router-dom": "^7.11.0"
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.1",
+        "@eslint/js": "^9.39.2",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^16.3.0",
+        "@testing-library/react": "^16.3.1",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^24.10.1",
-        "@types/react": "^19.2.5",
+        "@types/node": "^24.10.4",
+        "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
         "@types/react-router-dom": "^5.3.3",
-        "@vitejs/plugin-react": "^5.1.1",
-        "@vitest/coverage-v8": "^4.0.9",
-        "eslint": "^9.39.1",
+        "@vitejs/plugin-react": "^5.1.2",
+        "@vitest/coverage-v8": "^4.0.16",
+        "eslint": "^9.39.2",
         "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-react": "^7.37.5",
-        "jsdom": "^27.2.0",
+        "jsdom": "^27.4.0",
         "postcss": "^8.5.6",
         "postcss-preset-mantine": "^1.18.0",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "^3.6.2",
+        "prettier": "^3.7.4",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.4",
-        "vite": "^7.2.2",
-        "vitest": "^4.0.9"
+        "typescript-eslint": "^8.50.1",
+        "vite": "^7.3.0",
+        "vitest": "^4.0.16"
     },
     "scripts": {
         "dev": "vite --host",

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

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() {
             <RMWindow>
                 <WindowHeader />
                 <RMPage w={{ base: '100%', sm: 600 }} style={{ alignSelf: 'center' }}>
-                    <RMPageBody direction="column" px="xs" pb="xs" style={{ overflowY: 'auto' }}>
+                    <RMPageBody className={classes.body} direction="column">
                         <FontsDemo />
                         <MetadataDemo />
                         <NotificationsDemo />

src/components/app-root.module.css

@@ -1,3 +1,7 @@
+.root {
+    padding-top: env(safe-area-inset-top);
+}
+
 .burger {
     position: absolute;
     height: 40px;

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 (
         <BrowserRouter basename={import.meta.env.BASE_URL}>
-            <RMWindow className={isShowMenu ? 'show-menu' : ''}>
+            <RMWindow className={clsx(classes.root, isShowMenu && 'show-menu')}>
                 <ActionIcon
                     className={classes.burger}
                     variant={isShowMenu ? 'subtle' : 'filled'}

src/components/menu/nav-menu.module.css

@@ -63,7 +63,7 @@
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    padding: var(--mantine-spacing-md) var(--mantine-spacing-xs);
+    padding: var(--mantine-spacing-md) var(--mantine-spacing-xs) max(env(safe-area-inset-bottom), var(--mantine-spacing-md)) var(--mantine-spacing-xs);
     overflow-x: hidden;
     overflow-y: auto;
 
@@ -74,7 +74,7 @@
 
 .main {
     width: 100%;
-    padding: 0 var(--mantine-spacing-xs) var(--mantine-spacing-xs) var(--mantine-spacing-xs);
+    padding: 0 var(--mantine-spacing-xs) max(env(safe-area-inset-bottom), var(--mantine-spacing-xs)) var(--mantine-spacing-xs);
     overflow-x: hidden;
     overflow-y: auto;
     background: var(--mantine-color-white);

src/components/workspace/app-container.tsx

@@ -2,6 +2,7 @@ import classes from './workspace.module.css';
 import { useMemo } from 'react';
 import { FRAME_ID_PREFIX, WorkspaceTab } from '../../util/constants';
 import clsx from 'clsx';
+import { assetEnablement } from '../../util/asset-enablements';
 
 interface AppContainerProps {
     tab: WorkspaceTab;
@@ -15,7 +16,13 @@ export default function AppContainer(props: AppContainerProps) {
     const frameUrl = useMemo(() => tab.url ?? '/' + tab.app + '/', [tab.app]);
 
     return (
-        <div className={clsx(classes['app-container'], isActive && classes.show)}>
+        <div
+            className={clsx(
+                classes['app-container'],
+                isActive && classes.show,
+                !assetEnablement[tab.app]?.supportSafeAreaInset && classes['pb-safe-area-inset']
+            )}
+        >
             <iframe
                 id={FRAME_ID_PREFIX + tab.id}
                 src={frameUrl}

src/components/workspace/workspace.module.css

@@ -13,6 +13,10 @@
     &.show {
         display: flex;
     }
+
+    &.pb-safe-area-inset {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
 }
 
 .app-container iframe {

src/index.css

@@ -18,26 +18,27 @@ html {
     overscroll-behavior: none;
 }
 
+@media (display-mode: standalone) {
+    html {
+        height: 100vh;
+    }
+}
+
 body {
     margin: 0;
     overflow: hidden;
     height: 100%;
     width: 100%;
     width: -webkit-fill-available;
-    padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
-}
-
-@media (display-mode: standalone) {
-    body {
-        padding-bottom: 0;
-    }
 }
 
 div#root {
     height: 100%;
     width: 100%;
     background: inherit;
     overflow: hidden;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
 }
 
 * {

src/util/asset-enablements.ts

@@ -16,6 +16,7 @@ interface AssetDetail {
     showContributors?: boolean;
     legacyContributors?: string;
     showDonators?: boolean;
+    supportSafeAreaInset?: boolean;
 }
 
 const getTauriUrl = () => {
@@ -129,6 +130,7 @@ export const assetEnablement: Record<string, AssetDetail> = {
         assetType: 'devtool',
         allowedInstances: ['Org', 'GitHub', 'GitLab', 'localhost', 'unknown'],
         allowMultiInstances: true,
+        supportSafeAreaInset: true,
     },
     tutorial: {
         name: 'Tutorial',