css optimizing

src/timelines/MediaAttachmentGrid.tsx

@@ -124,6 +124,7 @@ const MediaAttachmentGrid: Component<{
       {
         width: `${width}px`,
         height: `${height}px`,
+        "contain-intrinsic-size": `${width}px ${height}px`,
       },
       accentColor ? { "--media-color-accent": accentColor } : {},
     );

src/timelines/TootList.tsx

@@ -5,6 +5,7 @@ import {
   ErrorBoundary,
   type Ref,
   createSelector,
+  createRenderEffect,
 } from "solid-js";
 import { type mastodon } from "masto";
 import { vibrate } from "../platform/hardware";
@@ -14,6 +15,8 @@ import { useHeroSignal, 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>;
@@ -110,6 +113,15 @@ 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) => {

src/timelines/toot-list.css

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

src/timelines/toot.module.css

@@ -4,6 +4,7 @@
   --toot-avatar-size: 40px;
   margin-block: 0;
   position: relative;
+  contain: content;
 
   &.toot {
     /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
@@ -122,6 +123,7 @@
   overflow: hidden;
   z-index: 1;
   position: relative;
+  contain: content;
 
   >img {
     max-width: 100%;
@@ -240,6 +242,7 @@
     border-radius: 2px;
     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;
 
     &:hover,
     &:focus-visible {