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,22 +109,19 @@ 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) {
+    if (screenOrientationCallback) {
-    window.screen.orientation.removeEventListener(
+      window.screen.orientation.removeEventListener(
-      "change",
+        "change",
-      screenOrientationCallback,
+        screenOrientationCallback,
-    );
-    screenOrientationCallback = undefined;
-  }
-
-  removeSafeAreaEmulation(root);
-
-  if (insets) {
-    screenOrientationCallback = () => {
-      console.debug(
-        `safe area emulation target: ${window.screen.orientation.type}`,
       );
+      screenOrientationCallback = undefined;
+    }
+    for (const name of ["top", "right", "bottom", "left"]) {
+      root.style.removeProperty(`--safe-area-inset-${name}`);
+    }
+  } else {
+    screenOrientationCallback = () => {
       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,64 +245,64 @@ const TootBottomSheet: Component = (props) => {
           </Toolbar>
         </AppBar>
       }
-      class="TootBottomSheet"
     >
-      <div
+      <TimeSourceProvider value={time}>
-        class="Scrollable"
+        <TootList
-      >
+          threads={ancestors.list}
-        <TimeSourceProvider value={time}>
+          onUnknownThread={ancestors.getPath}
-          <TootList
+          onChangeToot={ancestors.set}
-            threads={ancestors.list}
+        />
-            onUnknownThread={ancestors.getPath}
-            onChangeToot={ancestors.set}
-          />
 
-          <article>
+        <article>
-            <Show when={toot()}>
+          <Show when={toot()}>
-              <RegularToot
+            <RegularToot
-                id={`toot-${toot()!.id}`}
+              id={`toot-${toot()!.id}`}
-                class={cards.card}
+              class={cards.card}
-                style={{
+              style={{
-                  "scroll-margin-top":
+                "scroll-margin-top":
-                    "calc(var(--scaffold-topbar-height) + 20px)",
+                  "calc(var(--scaffold-topbar-height) + 20px)",
-                }}
+              }}
-                status={toot()!}
+              status={toot()!}
-                actionable={!!actSession()}
+              actionable={!!actSession()}
-                evaluated={true}
+              evaluated={true}
-                onBookmark={onBookmark}
+              onBookmark={onBookmark}
-                onRetoot={onBoost}
+              onRetoot={onBoost}
-                onFavourite={onFav}
+              onFavourite={onFav}
-                onClick={handleMainTootClick}
+              onClick={handleMainTootClick}
-              ></RegularToot>
+            ></RegularToot>
-            </Show>
-          </article>
-
-          <Show when={session()!.account}>
-            <TootComposer
-              mentions={defaultMentions()}
-              profile={session().account!}
-              replyToDisplayName={toot()?.account?.displayName || ""}
-              client={session().client}
-              onSent={() => refetchContext()}
-              inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
-            />
           </Show>
+        </article>
 
-          <Show when={tootContextErrorUncaught.loading}>
+        <Show when={session()!.account}>
-            <div
+          <TootComposer
-              class="progress-line"
+            mentions={defaultMentions()}
-            >
+            profile={session().account!}
-              <CircularProgress style="width: 1.5em; height: 1.5em;" />
+            replyToDisplayName={toot()?.account?.displayName || ""}
-            </div>
+            client={session().client}
-          </Show>
+            onSent={() => refetchContext()}
-
+            inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
-          <TootList
-            threads={descendants.list}
-            onUnknownThread={descendants.getPath}
-            onChangeToot={descendants.set}
           />
-        </TimeSourceProvider>
+        </Show>
-      </div>
+
+        <Show when={tootContextErrorUncaught.loading}>
+          <div
+            style={{
+              display: "flex",
+              "justify-content": "center",
+              "margin-block": "12px",
+            }}
+          >
+            <CircularProgress style="width: 1.5em; height: 1.5em;" />
+          </div>
+        </Show>
+
+        <TootList
+          threads={descendants.list}
+          onUnknownThread={descendants.getPath}
+          onChangeToot={descendants.set}
+        />
+      </TimeSourceProvider>
+      <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
     </Scaffold>
   );
 };