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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user