package.json

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

src/App.css

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

src/settings/Settings.tsx

@@ -98,14 +98,7 @@ 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;
@@ -116,7 +109,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",
@@ -124,14 +117,11 @@ function setupSafeAreaEmulation(name: string) {
       );
       screenOrientationCallback = undefined;
     }
-
+    for (const name of ["top", "right", "bottom", "left"]) {
-  removeSafeAreaEmulation(root);
+      root.style.removeProperty(`--safe-area-inset-${name}`);
-
+    }
-  if (insets) {
+  } else {
     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);
@@ -148,16 +138,6 @@ 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

@@ -1,18 +0,0 @@
-.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,7 +11,9 @@ 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";
@@ -24,7 +26,6 @@ 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;
 
@@ -244,10 +245,6 @@ const TootBottomSheet: Component = (props) => {
           </Toolbar>
         </AppBar>
       }
-      class="TootBottomSheet"
-    >
-      <div
-        class="Scrollable"
     >
       <TimeSourceProvider value={time}>
         <TootList
@@ -289,7 +286,11 @@ const TootBottomSheet: Component = (props) => {
 
         <Show when={tootContextErrorUncaught.loading}>
           <div
-              class="progress-line"
+            style={{
+              display: "flex",
+              "justify-content": "center",
+              "margin-block": "12px",
+            }}
           >
             <CircularProgress style="width: 1.5em; height: 1.5em;" />
           </div>
@@ -301,7 +302,7 @@ const TootBottomSheet: Component = (props) => {
           onChangeToot={descendants.set}
         />
       </TimeSourceProvider>
-      </div>
+      <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
     </Scaffold>
   );
 };