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", () => {...@@ -343,7 +343,7 @@ describe("MessagesTimeline", () => {
343343
344 expect(compactMarkup).toContain('class="h-3 sm:h-4"');344 expect(compactMarkup).toContain('class="h-3 sm:h-4"');
345 expect(compactMarkup).not.toContain("topbar-scroll-fade");345 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)]"');
347 expect(fadedMarkup).toContain("topbar-scroll-fade");347 expect(fadedMarkup).toContain("topbar-scroll-fade");
348 });348 });
349349
apps/web/src/components/chat/MessagesTimeline.tsx+4-2
...@@ -175,7 +175,9 @@ interface TimelineRowActivityState {...@@ -175,7 +175,9 @@ interface TimelineRowActivityState {
175const TimelineRowCtx = createContext<TimelineRowSharedState>(null!);175const TimelineRowCtx = createContext<TimelineRowSharedState>(null!);
176const TimelineRowActivityCtx = createContext<TimelineRowActivityState>(null!);176const TimelineRowActivityCtx = createContext<TimelineRowActivityState>(null!);
177const TIMELINE_LIST_HEADER = <div className="h-3 sm:h-4" />;177const 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
180// Header row shown when older turns exist beyond the loaded window. Plain182// Header row shown when older turns exist beyond the loaded window. Plain
181// button, no spinner animation; the label change is the loading indicator.183// button, no spinner animation; the label change is the loading indicator.
...@@ -189,7 +191,7 @@ function TimelineLoadEarlierHeader({...@@ -189,7 +191,7 @@ function TimelineLoadEarlierHeader({
189 fade: boolean;191 fade: boolean;
190}) {192}) {
191 return (193 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"}>
193 <div className="mx-auto w-full max-w-3xl pb-2">195 <div className="mx-auto w-full max-w-3xl pb-2">
194 <button196 <button
195 type="button"197 type="button"
apps/web/src/components/settings/settingsLayout.tsx+1-1
...@@ -250,7 +250,7 @@ export function SettingsPageContainer({...@@ -250,7 +250,7 @@ export function SettingsPageContainer({
250 return (250 return (
251 <SettingsSearchTargetProvider targetId={targetId} onTargetHandled={clearTargetHash}>251 <SettingsSearchTargetProvider targetId={targetId} onTargetHandled={clearTargetHash}>
252 <div252 <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"
254 data-settings-page-scroll254 data-settings-page-scroll
255 >255 >
256 <WorkspacePageContainer width={width} className={cn("gap-12", className)}>256 <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...@@ -111,6 +111,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
111 --workspace-native-controls-inset: 0px;111 --workspace-native-controls-inset: 0px;
112 --workspace-titlebar-control-size: 1.75rem;112 --workspace-titlebar-control-size: 1.75rem;
113 --workspace-titlebar-control-gap: 0.75rem;113 --workspace-titlebar-control-gap: 0.75rem;
114 --workspace-titlebar-scroll-fade-height: 1.5rem;
114115
115 @variant dark {116 @variant dark {
116 --appearance-contrast-target: white;117 --appearance-contrast-target: white;
...@@ -354,7 +355,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -354,7 +355,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
354}355}
355356
356@utility topbar-scroll-fade {357@utility topbar-scroll-fade {
357 --topbar-scroll-fade-height: 2.5rem;
358 -webkit-mask-image:358 -webkit-mask-image:
359 linear-gradient(359 linear-gradient(
360 to bottom,360 to bottom,
...@@ -370,8 +370,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -370,8 +370,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
370 -webkit-mask-position: top, bottom, right;370 -webkit-mask-position: top, bottom, right;
371 -webkit-mask-repeat: no-repeat;371 -webkit-mask-repeat: no-repeat;
372 -webkit-mask-size:372 -webkit-mask-size:
373 100% var(--topbar-scroll-fade-height),373 100% var(--workspace-titlebar-scroll-fade-height),
374 100% calc(100% - var(--topbar-scroll-fade-height)),374 100% calc(100% - var(--workspace-titlebar-scroll-fade-height)),
375 var(--app-scrollbar-width) 100%;375 var(--app-scrollbar-width) 100%;
376 mask-image:376 mask-image:
377 linear-gradient(377 linear-gradient(
...@@ -388,13 +388,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -388,13 +388,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
388 mask-position: top, bottom, right;388 mask-position: top, bottom, right;
389 mask-repeat: no-repeat;389 mask-repeat: no-repeat;
390 mask-size:390 mask-size:
391 100% var(--topbar-scroll-fade-height),391 100% var(--workspace-titlebar-scroll-fade-height),
392 100% calc(100% - var(--topbar-scroll-fade-height)),392 100% calc(100% - var(--workspace-titlebar-scroll-fade-height)),
393 var(--app-scrollbar-width) 100%;393 var(--app-scrollbar-width) 100%;
394
395 @variant sm {
396 --topbar-scroll-fade-height: 3rem;
397 }
398}394}
399395
400/* Virtualizers own their native scroll element, so they cannot use ScrollArea's396/* 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({...@@ -1919,9 +1919,9 @@ function PullRequestsColumn({
19191919
1920 <div1920 <div
1921 ref={scrollRef}1921 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"
1923 >1923 >
1924 {/* The top padding is the fade band's own height (1.5rem here), the same pairing the1924 {/* The top padding is the shared fade band's height, the same pairing the
1925 settings page makes: at rest the controls sit fully below the mask, and only1925 settings page makes: at rest the controls sit fully below the mask, and only
1926 content actually passing under the chrome fades. */}1926 content actually passing under the chrome fades. */}
1927 <WorkspacePageContainer className="gap-4">1927 <WorkspacePageContainer className="gap-4">