From 39afc055bf777d8eeeee2fa747e1d29b90cfe567 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Tue, 20 Jan 2026 18:02:13 +0000
Subject: [PATCH] add fade gradient to settings panel headers

---
 packages/app/src/components/settings-general.tsx     | 8 +++++++-
 packages/app/src/components/settings-keybinds.tsx    | 8 +++++++-
 packages/app/src/components/settings-permissions.tsx | 8 +++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index f8ffb421d..dc0652e60 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -37,7 +37,13 @@ export const SettingsGeneral: Component = () => {
 
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
-      <div class="sticky top-0 z-10">
+      <div
+        class="sticky top-0 z-10"
+        style={{
+          background:
+            "linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)",
+        }}
+      >
         <div class="flex flex-col gap-1 p-8 max-w-[720px]">
           <h2 class="text-16-medium text-text-strong">General</h2>
         </div>
diff --git a/packages/app/src/components/settings-keybinds.tsx b/packages/app/src/components/settings-keybinds.tsx
index 208bd909e..ca5df993d 100644
--- a/packages/app/src/components/settings-keybinds.tsx
+++ b/packages/app/src/components/settings-keybinds.tsx
@@ -280,7 +280,13 @@ export const SettingsKeybinds: Component = () => {
 
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
-      <div class="sticky top-0 z-10">
+      <div
+        class="sticky top-0 z-10"
+        style={{
+          background:
+            "linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)",
+        }}
+      >
         <div class="flex items-start justify-between gap-4 p-8 max-w-[720px]">
           <div class="flex flex-col gap-1">
             <h2 class="text-16-medium text-text-strong">Keyboard shortcuts</h2>
diff --git a/packages/app/src/components/settings-permissions.tsx b/packages/app/src/components/settings-permissions.tsx
index b311da0ef..aa83de01e 100644
--- a/packages/app/src/components/settings-permissions.tsx
+++ b/packages/app/src/components/settings-permissions.tsx
@@ -101,7 +101,13 @@ export const SettingsPermissions: Component = () => {
 
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
-      <div class="sticky top-0 z-10">
+      <div
+        class="sticky top-0 z-10"
+        style={{
+          background:
+            "linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)",
+        }}
+      >
         <div class="flex flex-col gap-1 p-8 max-w-[720px]">
           <h2 class="text-16-medium text-text-strong">Permissions</h2>
           <p class="text-14-regular text-text-weak">Control what tools the server can use by default.</p>