authorgravatar for maria@kuuro.netmaria-rcks <maria@kuuro.net> 2026-07-22 23:45:25-04:00
committergravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-07-23 01:13:29-04:00
logc38225ef1cd462ce79034f6b76f9acd9eac0349b
treeecb2c6f8fa4bad32a72d9854b9317140a6c0e085
parent39cd15b9543af45dd8aed75612bf9baebe92abbd

style(web): fade settings content beneath navbar

2 files changed, 11 insertions(+), 9 deletions(-)

apps/web/src/components/settings/settingsLayout.tsx+1-1
......@@ -120,7 +120,7 @@ export function SettingsPageContainer({
120120 className?: string;
121121}) {
122122 return (
123 <div className="scrollbar-gutter-both flex-1 overflow-y-auto px-4 py-7 sm:px-8 sm:py-10">
123 <div className="settings-page-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto px-4 pt-10 pb-7 sm:px-8 sm:pt-12 sm:pb-10">
124124 <div className={cn("mx-auto flex w-full max-w-4xl flex-col gap-12", className)}>
125125 {children}
126126 </div>
apps/web/src/index.css+10-8
......@@ -305,8 +305,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
305305
306306 /* Fade rows themselves as they pass beneath the top chrome. A mask remains
307307 visible even when the header and timeline share the same background. */
308 .chat-timeline-scroll-fade {
309 --timeline-top-fade-height: 2.5rem;
308 .chat-timeline-scroll-fade,
309 .settings-page-scroll-fade {
310 --topbar-scroll-fade-height: 2.5rem;
310311 -webkit-mask-image:
311312 linear-gradient(
312313 to bottom,
......@@ -322,8 +323,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
322323 -webkit-mask-position: top, bottom;
323324 -webkit-mask-repeat: no-repeat;
324325 -webkit-mask-size:
325 100% var(--timeline-top-fade-height),
326 100% calc(100% - var(--timeline-top-fade-height));
326 100% var(--topbar-scroll-fade-height),
327 100% calc(100% - var(--topbar-scroll-fade-height));
327328 mask-image:
328329 linear-gradient(
329330 to bottom,
......@@ -339,8 +340,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
339340 mask-position: top, bottom;
340341 mask-repeat: no-repeat;
341342 mask-size:
342 100% var(--timeline-top-fade-height),
343 100% calc(100% - var(--timeline-top-fade-height));
343 100% var(--topbar-scroll-fade-height),
344 100% calc(100% - var(--topbar-scroll-fade-height));
344345 }
345346
346347 .workspace-titlebar-controls {
......@@ -593,8 +594,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
593594 }
594595
595596 @media (min-width: 40rem) {
596 .chat-timeline-scroll-fade {
597 --timeline-top-fade-height: 3rem;
597 .chat-timeline-scroll-fade,
598 .settings-page-scroll-fade {
599 --topbar-scroll-fade-height: 3rem;
598600 }
599601
600602 .chat-composer-horizontal-inset {