fix(feed): stop the layout juddering when content lands on the scroll threshold

The feed takes its column count from main's clientWidth and its
thumbnails are aspect-ratio boxes, so the two feed each other once the
content height sits within a scrollbar's width of the viewport: the bar
appears, 15px goes, thumbs shorten, the content fits, the bar leaves,
and round again — every frame. Measured: scrollbar width alternating
0/15 and clientWidth 987/972 on consecutive frames. Reserving the gutter
holds clientWidth constant and breaks it.
This commit is contained in:
2026-07-16 04:14:27 +02:00
parent f108c93c02
commit ace4a144e8
+7 -1
View File
@@ -898,7 +898,13 @@ export default function App() {
>
{meQuery.data!.is_demo && <DemoBanner />}
<VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
<main className="flex-1 min-w-0 overflow-y-auto">
{/* scrollbar-gutter: stable is load-bearing, not cosmetic. The feed derives its column
count from this element's clientWidth and its thumbnails are aspect-ratio boxes, so
when the content lands within a scrollbar's width of the viewport height the two feed
each other: scrollbar appears -> 15px narrower -> shorter thumbs -> content fits ->
scrollbar goes -> wider -> taller -> repeat, every frame. Reserving the gutter keeps
clientWidth constant and breaks the loop. */}
<main className="flex-1 min-w-0 overflow-y-auto [scrollbar-gutter:stable]">
<Suspense fallback={pageFallback}>
{page === "channels" ? (
<Channels