From 586262decd703c5877a6e7c081bf712353db0129 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Mon, 22 Jun 2026 04:59:13 -0700
Subject: [PATCH] Fix grey scroll-fade bands on macOS Safari 27 Beta (#6507)

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>
---
 studio/frontend/src/components/app-sidebar.tsx         | 2 +-
 studio/frontend/src/components/assistant-ui/thread.tsx | 2 +-
 studio/frontend/src/features/chat/chat-page.tsx        | 2 +-
 studio/frontend/src/index.css                          | 8 +++++++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx
index c6fa3e92ec..734860138a 100644
--- a/studio/frontend/src/components/app-sidebar.tsx
+++ b/studio/frontend/src/components/app-sidebar.tsx
@@ -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",
           )}
         />
diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 3d986c4c18..57e6d02f55 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -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]",
diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index 4816e1d515..daad2c4524 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -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
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index b515c907db..cf7bee70d5 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -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. */