various css optimizations

src/timelines/Home.tsx

@@ -168,6 +168,8 @@ const Home: ParentComponent = (props) => {
       padding: 0 16px;
       scroll-snap-align: center;
       overscroll-behavior-block: none;
+      contain: strict;
+      contain-intrinsic-size: 100% 100%;
 
       @media (max-width: 600px) {
         padding: 0;
@@ -186,6 +188,10 @@ const Home: ParentComponent = (props) => {
       padding-left: var(--safe-area-inset-left, 0);
       padding-right: var(--safe-area-inset-right, 0);
 
+      & > * {
+        content-visibility: auto;
+      }
+
       @media (max-width: 600px) {
         grid-auto-columns: 100%;
       }

src/timelines/TootList.tsx

@@ -5,18 +5,15 @@ import {
   ErrorBoundary,
   type Ref,
   createSelector,
-  createRenderEffect,
 } from "solid-js";
 import { type mastodon } from "masto";
 import { vibrate } from "../platform/hardware";
 import Thread from "./Thread.jsx";
 import { useDefaultSession } from "../masto/clients";
-import { useHeroSignal, useHeroSource } from "../platform/anim";
+import { useHeroSource } from "../platform/anim";
 import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import { useNavigate } from "@solidjs/router";
-import { createElementSize } from "@solid-primitives/resize-observer";
-import "./toot-list.css"
 
 const TootList: Component<{
   ref?: Ref<HTMLDivElement>;
@@ -113,22 +110,13 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
-  const listenElementHeight = (
-    e: HTMLElement,
-    updateHeight: (height: number) => void,
-  ) => {
-    const size = createElementSize(e);
-
-    createRenderEffect(() => updateHeight(size.height));
-  };
-
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
         return <p>Oops: {String(err)}</p>;
       }}
     >
-      <div ref={props.ref}>
+      <div ref={props.ref} class="toot-list">
         <For each={props.threads}>
           {(itemId, index) => {
             const path = props.onUnknownThread(itemId)!;

src/timelines/toot-list.css

@@ -1,3 +0,0 @@
-.toot-list * {
-  content-visibility: auto;
-}

src/timelines/toot.module.css

@@ -243,6 +243,7 @@
     border: 1px solid var(--tutu-color-surface-d);
     transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
     contain: strict;
+    content-visibility: auto;
 
     &:hover,
     &:focus-visible {