rnxcmkidd: Add the viewport-fit bento shell and a dev feed preview with fixtures

src/components/Feed.tsx

@@ -29,6 +29,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
   // re-checks the feed instead of creating a duplicate.
   const unconfirmed = useRef<{ id: string | null }>({ id: null });
   const sentinel = useRef<HTMLDivElement | null>(null);
+  const list = useRef<HTMLDivElement | null>(null);
   const busy = useRef(false);
   const shown = useRef<Set<string>>(new Set());
 
@@ -93,7 +94,8 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
       (entries) => {
         if (entries.some((e) => e.isIntersecting)) void loadMore();
       },
-      { rootMargin: "400px" },
+      // The list scrolls inside its panel, so it is the observer root.
+      { root: list.current, rootMargin: "400px" },
     );
     io.observe(el);
     return () => io.disconnect();
@@ -224,7 +226,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
   function showNew() {
     setPosts((cur) => mergePosts(cur, pending));
     setPending([]);
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    list.current?.scrollTo({ top: 0, behavior: "smooth" });
   }
 
   return (
@@ -246,6 +248,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
       onSignedOut={onSignedOut}
       composer={{ value: draft, busy: posting, error: postFailed, file, onChange: changeDraft, onFile: changeFile, onSubmit: () => void publish() }}
       sentinelRef={sentinel}
+      listRef={list}
     />
   );
 }