add fade gradient to settings panel headers

2026-01-20 18:02:13 +00:00
parent 73b1bc42f4
commit 39afc055bf
3 changed files with 21 additions and 3 deletions
--- 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>