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 {
+import { Close as CloseIcon } from "@suid/icons-material";
-  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,64 +244,64 @@ const TootBottomSheet: Component = (props) => {
           </Toolbar>
         </AppBar>
       }
+      class="TootBottomSheet"
     >
-      <TimeSourceProvider value={time}>
+      <div
-        <TootList
+        class="Scrollable"
-          threads={ancestors.list}
+      >
-          onUnknownThread={ancestors.getPath}
+        <TimeSourceProvider value={time}>
-          onChangeToot={ancestors.set}
+          <TootList
-        />
+            threads={ancestors.list}
-
+            onUnknownThread={ancestors.getPath}
-        <article>
+            onChangeToot={ancestors.set}
-          <Show when={toot()}>
-            <RegularToot
-              id={`toot-${toot()!.id}`}
-              class={cards.card}
-              style={{
-                "scroll-margin-top":
-                  "calc(var(--scaffold-topbar-height) + 20px)",
-              }}
-              status={toot()!}
-              actionable={!!actSession()}
-              evaluated={true}
-              onBookmark={onBookmark}
-              onRetoot={onBoost}
-              onFavourite={onFav}
-              onClick={handleMainTootClick}
-            ></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>
 
-        <Show when={tootContextErrorUncaught.loading}>
+          <article>
-          <div
+            <Show when={toot()}>
-            style={{
+              <RegularToot
-              display: "flex",
+                id={`toot-${toot()!.id}`}
-              "justify-content": "center",
+                class={cards.card}
-              "margin-block": "12px",
+                style={{
-            }}
+                  "scroll-margin-top":
-          >
+                    "calc(var(--scaffold-topbar-height) + 20px)",
-            <CircularProgress style="width: 1.5em; height: 1.5em;" />
+                }}
-          </div>
+                status={toot()!}
-        </Show>
+                actionable={!!actSession()}
+                evaluated={true}
+                onBookmark={onBookmark}
+                onRetoot={onBoost}
+                onFavourite={onFav}
+                onClick={handleMainTootClick}
+              ></RegularToot>
+            </Show>
+          </article>
 
-        <TootList
+          <Show when={session()!.account}>
-          threads={descendants.list}
+            <TootComposer
-          onUnknownThread={descendants.getPath}
+              mentions={defaultMentions()}
-          onChangeToot={descendants.set}
+              profile={session().account!}
-        />
+              replyToDisplayName={toot()?.account?.displayName || ""}
-      </TimeSourceProvider>
+              client={session().client}
-      <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
+              onSent={() => refetchContext()}
+              inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
+            />
+          </Show>
+
+          <Show when={tootContextErrorUncaught.loading}>
+            <div
+              class="progress-line"
+            >
+              <CircularProgress style="width: 1.5em; height: 1.5em;" />
+            </div>
+          </Show>
+
+          <TootList
+            threads={descendants.list}
+            onUnknownThread={descendants.getPath}
+            onChangeToot={descendants.set}
+          />
+        </TimeSourceProvider>
+      </div>
     </Scaffold>
   );
 };