App: try fix gap at bottom on iOS standalone

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "tutu",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "",
   "private": true,
   "type": "module",

src/App.css

@@ -10,6 +10,11 @@
   overscroll-behavior-block: none;
 }
 
+body, #root {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
 .custom-emoji {
   width: 1em;
 }

src/settings/Settings.tsx

@@ -98,7 +98,14 @@ const safeAreaInsets: Record<string, SafeAreaInsets> = {
 
 let screenOrientationCallback: (() => void) | undefined;
 
+function removeSafeAreaEmulation(root: HTMLElement) {
+  for (const name of ["top", "right", "bottom", "left"]) {
+    root.style.removeProperty(`--safe-area-inset-${name}`);
+  }
+}
+
 function applySafeAreaEmulation(root: HTMLElement, insets: Inset) {
+  removeSafeAreaEmulation(root);
   for (const key of Object.keys(insets) as (keyof Inset)[]) {
     const value = insets[key];
     if (!value || value === 0) continue;
@@ -109,7 +116,7 @@ function applySafeAreaEmulation(root: HTMLElement, insets: Inset) {
 function setupSafeAreaEmulation(name: string) {
   const insets = safeAreaInsets[name];
   const root = document.querySelector(":root")! as HTMLElement;
-  if (!insets) {
+
   if (screenOrientationCallback) {
     window.screen.orientation.removeEventListener(
       "change",
@@ -117,11 +124,14 @@ function setupSafeAreaEmulation(name: string) {
     );
     screenOrientationCallback = undefined;
   }
-    for (const name of ["top", "right", "bottom", "left"]) {
-      root.style.removeProperty(`--safe-area-inset-${name}`);
-    }
-  } else {
+
+  removeSafeAreaEmulation(root);
+
+  if (insets) {
     screenOrientationCallback = () => {
+      console.debug(
+        `safe area emulation target: ${window.screen.orientation.type}`,
+      );
       if (window.screen.orientation.type === "portrait-primary") {
         console.debug("safe area emulation: protrait");
         applySafeAreaEmulation(root, insets.protrait);
@@ -138,6 +148,16 @@ function setupSafeAreaEmulation(name: string) {
   }
 }
 
+if (import.meta.hot) {
+  import.meta.hot.accept((mod) => {
+    if (!mod) return;
+    if (screenOrientationCallback) {
+      mod["screenOrientationCallback"] = screenOrientationCallback;
+      setTimeout(screenOrientationCallback, 0);
+    }
+  });
+}
+
 type Strings = {
   ["lang.auto"]: Template<{ detected: string }>;
 } & Record<string, string | undefined>;

src/timelines/TootBottomSheet.css

@@ -0,0 +1,18 @@
+.TootBottomSheet {
+  overflow: hidden;
+
+  .Scrollable {
+    padding-bottom: var(--safe-area-inset-bottom, 0);
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    max-height: calc(100vh - var(--scaffold-topbar-height, 0px));
+    max-height: calc(100dvh - var(--scaffold-topbar-height, 0px));
+  }
+
+  .progress-line {
+    display: flex;
+    justify-content: center;
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+}

src/timelines/TootBottomSheet.tsx

@@ -11,9 +11,7 @@ import {
 import Scaffold from "../material/Scaffold";
 import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
 import { Title } from "../material/typography";
-import {
-  Close as CloseIcon,
-} from "@suid/icons-material";
+import { Close as CloseIcon } from "@suid/icons-material";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import RegularToot, { findElementActionable } from "./RegularToot";
@@ -26,6 +24,7 @@ import TootComposer from "./TootComposer";
 import { useDocumentTitle } from "../utils";
 import { createTimelineControlsForArray } from "../masto/timelines";
 import TootList from "./TootList";
+import "./TootBottomSheet.css";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -245,6 +244,10 @@ const TootBottomSheet: Component = (props) => {
           </Toolbar>
         </AppBar>
       }
+      class="TootBottomSheet"
+    >
+      <div
+        class="Scrollable"
       >
         <TimeSourceProvider value={time}>
           <TootList
@@ -286,11 +289,7 @@ const TootBottomSheet: Component = (props) => {
 
           <Show when={tootContextErrorUncaught.loading}>
             <div
-            style={{
-              display: "flex",
-              "justify-content": "center",
-              "margin-block": "12px",
-            }}
+              class="progress-line"
             >
               <CircularProgress style="width: 1.5em; height: 1.5em;" />
             </div>
@@ -302,7 +301,7 @@ const TootBottomSheet: Component = (props) => {
             onChangeToot={descendants.set}
           />
         </TimeSourceProvider>
-      <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
+      </div>
     </Scaffold>
   );
 };