ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix grey scroll-fade bands on macOS Safari 27 Beta (#6507)

Browse source 
The chat and sidebar scroll-fade overlays ended their gradient at the
`transparent` keyword, which is transparent black. Safari 27 Beta
(Liquid Glass) interpolates an opaque colour to transparent black
through a grey midtone, so the fades render as two solid grey bands
(top of the chat and above the composer).

Fade each gradient to the theme colour at zero alpha instead, so every
step keeps the same hue and no grey can appear. Fixes #6457.

Co-authored-by: wasimysaid <wasimysdev@gmail.com>
This commit is contained in:
Michael Han 2026-06-22 04:59:13 -07:00 • committed by GitHub
commit 586262decd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
studio/frontend/src/components/app-sidebar.tsx
View file

@ -1355,7 +1355,7 @@ export function AppSidebar() {
<div
aria-hidden="true"
className={cn(
"pointer-events-none absolute left-0 right-2 bottom-full h-10 bg-gradient-to-t from-[var(--sidebar)] to-transparent transition-opacity duration-200",
"pointer-events-none absolute left-0 right-2 bottom-full h-10 bg-gradient-to-t from-[var(--sidebar)] to-[rgb(from_var(--sidebar)_r_g_b/0)] transition-opacity duration-200",
canScrollDown ? "opacity-100" : "opacity-0",
)}
/>

2
studio/frontend/src/components/assistant-ui/thread.tsx
View file

@ -1210,7 +1210,7 @@ const ThreadComposerDock: FC<{
<div
aria-hidden={true}
className={cn(
"absolute inset-x-0 bottom-0 bg-gradient-to-t from-background from-[calc(100%_-_28px)] to-transparent",
"absolute inset-x-0 bottom-0 bg-gradient-to-t from-background from-[calc(100%_-_28px)] to-[rgb(from_var(--background)_r_g_b/0)]",
queueVisible
? "h-32 backdrop-blur-[1px] [mask-image:linear-gradient(to_top,black_0%,black_58%,transparent_100%)]"
: "top-[10px]",

2
studio/frontend/src/features/chat/chat-page.tsx
View file

@ -2304,7 +2304,7 @@ export function ChatPage({
{view.mode !== "compare" && (
<div
aria-hidden={true}
className="pointer-events-none absolute left-0 right-[10px] top-[48px] z-20 h-6 bg-gradient-to-b from-background to-transparent"
className="pointer-events-none absolute left-0 right-[10px] top-[48px] z-20 h-6 bg-gradient-to-b from-background to-[rgb(from_var(--background)_r_g_b/0)]"
/>
)}
<div

8
studio/frontend/src/index.css
View file

@ -43,7 +43,13 @@
inset-inline: 0;
bottom: 0;
height: 40px;
background: linear-gradient(to top, var(--sidebar), transparent);
/* Fade to sidebar colour at 0 alpha, not `transparent` (transparent
black), which shows a grey midtone in Safari 27 Liquid Glass. */
background: linear-gradient(
to top,
var(--sidebar),
rgb(from var(--sidebar) r g b / 0)
);
}
/* Model picker list: once scrolled, the top edge fades so rows dissolve as
they pass under the pinned search / tab bar. */