From 9e97f9b611fd051c63847dca8b2374650d6c459b Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Wed, 30 Oct 2024 13:22:00 +0800
Subject: [PATCH] various css optimizations

---
 src/timelines/Home.tsx        |  6 ++++++
 src/timelines/TootList.tsx    | 16 ++--------------
 src/timelines/toot-list.css   |  3 ---
 src/timelines/toot.module.css |  1 +
 4 files changed, 9 insertions(+), 17 deletions(-)
 delete mode 100644 src/timelines/toot-list.css

diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx
index b463d96..0ba7202 100644
--- a/src/timelines/Home.tsx
+++ b/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%;
       }
diff --git a/src/timelines/TootList.tsx b/src/timelines/TootList.tsx
index 4100236..9efea10 100644
--- a/src/timelines/TootList.tsx
+++ b/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)!;
diff --git a/src/timelines/toot-list.css b/src/timelines/toot-list.css
deleted file mode 100644
index be1dfd6..0000000
--- a/src/timelines/toot-list.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.toot-list * {
-  content-visibility: auto;
-}
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index e9caeaf..0985c4b 100644
--- a/src/timelines/toot.module.css
+++ b/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 {