authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-08-30 17:43:56-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-30 17:43:56-04:00
log6e324b9bbfc72e694c3c16abeb59716c37fc02d5
tree00c9f47d02dbc75ad6a032886754827855e80fe6
parent86c9a9288b5704e79bbe68fb0834d56036456f3e
signature Signed by PGP key B5690EEEBB952194

fix(web): reduce title bar scroll fade height (#8799)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

5 files changed, 13 insertions(+), 15 deletions(-)

apps/web/src/components/chat/MessagesTimeline.test.tsx+1-1
......@@ -343,7 +343,7 @@ describe("MessagesTimeline", () => {
343343
344344 expect(compactMarkup).toContain('class="h-3 sm:h-4"');
345345 expect(compactMarkup).not.toContain("topbar-scroll-fade");
346 expect(fadedMarkup).toContain('class="h-10 sm:h-12"');
346 expect(fadedMarkup).toContain('class="h-[var(--workspace-titlebar-scroll-fade-height)]"');
347347 expect(fadedMarkup).toContain("topbar-scroll-fade");
348348 });
349349
apps/web/src/components/chat/MessagesTimeline.tsx+4-2
......@@ -175,7 +175,9 @@ interface TimelineRowActivityState {
175175const TimelineRowCtx = createContext<TimelineRowSharedState>(null!);
176176const TimelineRowActivityCtx = createContext<TimelineRowActivityState>(null!);
177177const TIMELINE_LIST_HEADER = <div className="h-3 sm:h-4" />;
178const TIMELINE_LIST_FADE_HEADER = <div className="h-10 sm:h-12" />;
178const TIMELINE_LIST_FADE_HEADER = (
179 <div className="h-[var(--workspace-titlebar-scroll-fade-height)]" />
180);
179181
180182// Header row shown when older turns exist beyond the loaded window. Plain
181183// button, no spinner animation; the label change is the loading indicator.
......@@ -189,7 +191,7 @@ function TimelineLoadEarlierHeader({
189191 fade: boolean;
190192}) {
191193 return (
192 <div className={fade ? "pt-10 sm:pt-12" : "pt-3 sm:pt-4"}>
194 <div className={fade ? "pt-[var(--workspace-titlebar-scroll-fade-height)]" : "pt-3 sm:pt-4"}>
193195 <div className="mx-auto w-full max-w-3xl pb-2">
194196 <button
195197 type="button"
apps/web/src/components/settings/settingsLayout.tsx+1-1
......@@ -250,7 +250,7 @@ export function SettingsPageContainer({
250250 return (
251251 <SettingsSearchTargetProvider targetId={targetId} onTargetHandled={clearTargetHash}>
252252 <div
253 className="topbar-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto [--topbar-scroll-fade-height:1.5rem] sm:[--topbar-scroll-fade-height:1.5rem]"
253 className="topbar-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto"
254254 data-settings-page-scroll
255255 >
256256 <WorkspacePageContainer width={width} className={cn("gap-12", className)}>
apps/web/src/index.css+5-9
......@@ -111,6 +111,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
111111 --workspace-native-controls-inset: 0px;
112112 --workspace-titlebar-control-size: 1.75rem;
113113 --workspace-titlebar-control-gap: 0.75rem;
114 --workspace-titlebar-scroll-fade-height: 1.5rem;
114115
115116 @variant dark {
116117 --appearance-contrast-target: white;
......@@ -354,7 +355,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
354355}
355356
356357@utility topbar-scroll-fade {
357 --topbar-scroll-fade-height: 2.5rem;
358358 -webkit-mask-image:
359359 linear-gradient(
360360 to bottom,
......@@ -370,8 +370,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
370370 -webkit-mask-position: top, bottom, right;
371371 -webkit-mask-repeat: no-repeat;
372372 -webkit-mask-size:
373 100% var(--topbar-scroll-fade-height),
374 100% calc(100% - var(--topbar-scroll-fade-height)),
373 100% var(--workspace-titlebar-scroll-fade-height),
374 100% calc(100% - var(--workspace-titlebar-scroll-fade-height)),
375375 var(--app-scrollbar-width) 100%;
376376 mask-image:
377377 linear-gradient(
......@@ -388,13 +388,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
388388 mask-position: top, bottom, right;
389389 mask-repeat: no-repeat;
390390 mask-size:
391 100% var(--topbar-scroll-fade-height),
392 100% calc(100% - var(--topbar-scroll-fade-height)),
391 100% var(--workspace-titlebar-scroll-fade-height),
392 100% calc(100% - var(--workspace-titlebar-scroll-fade-height)),
393393 var(--app-scrollbar-width) 100%;
394
395 @variant sm {
396 --topbar-scroll-fade-height: 3rem;
397 }
398394}
399395
400396/* Virtualizers own their native scroll element, so they cannot use ScrollArea's
apps/web/src/routes/_chat.pull-requests.tsx+2-2
......@@ -1919,9 +1919,9 @@ function PullRequestsColumn({
19191919
19201920 <div
19211921 ref={scrollRef}
1922 className="topbar-scroll-fade scrollbar-gutter-both min-h-0 flex-1 overflow-y-auto [--topbar-scroll-fade-height:1.5rem] sm:[--topbar-scroll-fade-height:1.5rem]"
1922 className="topbar-scroll-fade scrollbar-gutter-both min-h-0 flex-1 overflow-y-auto"
19231923 >
1924 {/* The top padding is the fade band's own height (1.5rem here), the same pairing the
1924 {/* The top padding is the shared fade band's height, the same pairing the
19251925 settings page makes: at rest the controls sit fully below the mask, and only
19261926 content actually passing under the chrome fades. */}
19271927 <WorkspacePageContainer className="gap-4">