TootBottomSheet: test scrollable

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