From 6767b3f08f9312e62b16b516e1d888c180b45523 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Mon, 6 Jul 2026 14:09:00 +0100
Subject: [PATCH] feat(desktop): add subtle top/bottom fade on theme scroll
 area

- Add gradient fades at top and bottom of the theme grid container
- Use h-3 (12px) for a subtle fade effect, not too aggressive
---
 .../features/settings/ui/SettingsPanels.tsx   | 92 +++++++++++--------
 1 file changed, 56 insertions(+), 36 deletions(-)

diff --git a/desktop/src/features/settings/ui/SettingsPanels.tsx b/desktop/src/features/settings/ui/SettingsPanels.tsx
index 64c36e986e..5e9b1daafb 100644
--- a/desktop/src/features/settings/ui/SettingsPanels.tsx
+++ b/desktop/src/features/settings/ui/SettingsPanels.tsx
@@ -436,43 +436,63 @@ function ThemeSettingsCard() {
       </div>
 
       {/* Theme grid — constrained to ~3 rows, scrolls internally */}
-      <div className="mb-6 max-h-[430px] overflow-y-auto rounded-lg">
-        <div className="flex flex-wrap gap-4 p-1">
-          {selectedMode === "system" &&
-            pairedLight.map((lightName) => {
-              const darkName = getThemePair(lightName);
-              if (!darkName) return null;
-              return (
-                <PairedThemeTile
-                  darkVars={getVars(darkName)}
-                  isActive={isPairActive(lightName)}
-                  key={lightName}
-                  lightName={lightName}
-                  lightVars={getVars(lightName)}
-                  onSelect={() => handleSelectTheme(lightName)}
+      <div className="relative mb-6">
+        {/* Top fade */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-0 top-0 z-10 h-3"
+          style={{
+            background:
+              "linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0))",
+          }}
+        />
+        {/* Bottom fade */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3"
+          style={{
+            background:
+              "linear-gradient(to top, hsl(var(--background)), hsl(var(--background) / 0))",
+          }}
+        />
+        <div className="max-h-[430px] overflow-y-auto rounded-lg">
+          <div className="flex flex-wrap gap-4 p-1">
+            {selectedMode === "system" &&
+              pairedLight.map((lightName) => {
+                const darkName = getThemePair(lightName);
+                if (!darkName) return null;
+                return (
+                  <PairedThemeTile
+                    darkVars={getVars(darkName)}
+                    isActive={isPairActive(lightName)}
+                    key={lightName}
+                    lightName={lightName}
+                    lightVars={getVars(lightName)}
+                    onSelect={() => handleSelectTheme(lightName)}
+                  />
+                );
+              })}
+            {selectedMode === "light" &&
+              allLightThemes.map((name) => (
+                <SingleThemeTile
+                  isActive={selectedThemeName === name}
+                  key={name}
+                  name={name}
+                  onSelect={() => handleSelectTheme(name)}
+                  vars={getVars(name)}
                 />
-              );
-            })}
-          {selectedMode === "light" &&
-            allLightThemes.map((name) => (
-              <SingleThemeTile
-                isActive={selectedThemeName === name}
-                key={name}
-                name={name}
-                onSelect={() => handleSelectTheme(name)}
-                vars={getVars(name)}
-              />
-            ))}
-          {selectedMode === "dark" &&
-            allDarkThemes.map((name) => (
-              <SingleThemeTile
-                isActive={selectedThemeName === name}
-                key={name}
-                name={name}
-                onSelect={() => handleSelectTheme(name)}
-                vars={getVars(name)}
-              />
-            ))}
+              ))}
+            {selectedMode === "dark" &&
+              allDarkThemes.map((name) => (
+                <SingleThemeTile
+                  isActive={selectedThemeName === name}
+                  key={name}
+                  name={name}
+                  onSelect={() => handleSelectTheme(name)}
+                  vars={getVars(name)}
+                />
+              ))}
+          </div>
         </div>
       </div>