From 20aa676eecf45de9f8fbda0da158d08d311a3fe4 Mon Sep 17 00:00:00 2001
From: zhom <2717306+zhom@users.noreply.github.com>
Date: Sat, 26 Sep 2026 11:15:49 +0400
Subject: [PATCH] fix: settings bar fade

---
 e2e/tests/motion.test.mjs          |  3 ++-
 src/components/ui/scroll-strip.tsx | 13 ++++---------
 src/styles/globals.css             | 18 +++++++++++-------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/e2e/tests/motion.test.mjs b/e2e/tests/motion.test.mjs
index c2edbf9d..5778852a 100644
--- a/e2e/tests/motion.test.mjs
+++ b/e2e/tests/motion.test.mjs
@@ -1436,7 +1436,8 @@ test("settings sections stay on one row that scrolls, drags, and follows the pag
         return (
           state.active === "advanced" &&
           state.activeVisible &&
-          state.fadeLeft === "true"
+          state.fadeLeft === "true" &&
+          state.fadeRight === "false"
         );
       },
       { description: "the row follows the active section" },
diff --git a/src/components/ui/scroll-strip.tsx b/src/components/ui/scroll-strip.tsx
index 3f5692a8..8ebb6aba 100644
--- a/src/components/ui/scroll-strip.tsx
+++ b/src/components/ui/scroll-strip.tsx
@@ -16,10 +16,7 @@ import { cn } from "@/lib/utils";
 /** How far a pressed pointer travels before a press becomes a drag. */
 const DRAG_THRESHOLD_PX = 4;
 /** Room kept between the active item and a faded edge. */
-const EDGE_ROOM_PX = 28;
-/** Clears a 2px focus outline: a row that scrolls sideways also clips
- * vertically, so a badge's focus ring would be cut at every edge. */
-const RING_ROOM_PX = 2;
+const EDGE_ROOM_PX = 48;
 
 interface ScrollStripProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
@@ -230,15 +227,13 @@ export function ScrollStrip({
           onClickCapture?.(event);
         }}
         className={cn(
-          "scroll-fade-x relative flex scrollbar-none items-center overflow-x-auto py-0.5 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+          // p-0.5 clears a 2px focus outline: a row that scrolls sideways
+          // also clips vertically, so a focus ring would be cut at every edge.
+          "scroll-fade-x relative flex scrollbar-none items-center overflow-x-auto p-0.5 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
           overflowing && "cursor-grab",
           dragging && "cursor-grabbing select-none",
           stripClassName,
         )}
-        style={{
-          paddingLeft: fadeLeft ? 22 : RING_ROOM_PX,
-          paddingRight: fadeRight ? 22 : RING_ROOM_PX,
-        }}
       >
         {children}
       </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b7df8200..d5fd5469 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -239,24 +239,28 @@
   --bottom-mask: transparent;
 }
 
-/* The same for a single row that scrolls sideways (`ScrollStrip`). The band
-   is wider than the chevron that sits over it, so a badge passing under the
-   chevron is already gone. */
+/* The same for a single row that scrolls sideways (`ScrollStrip`). The first
+   24px, where the chevron sits, are fully cleared, so the chevron never lands
+   on half-faded letters; the badges fade in over the next 24px. */
 .scroll-fade-x {
   --left-mask: black;
   --right-mask: black;
   -webkit-mask-image: linear-gradient(
     to right,
     var(--left-mask) 0,
-    black 36px,
-    black calc(100% - 36px),
+    var(--left-mask) 24px,
+    black 48px,
+    black calc(100% - 48px),
+    var(--right-mask) calc(100% - 24px),
     var(--right-mask)
   );
   mask-image: linear-gradient(
     to right,
     var(--left-mask) 0,
-    black 36px,
-    black calc(100% - 36px),
+    var(--left-mask) 24px,
+    black 48px,
+    black calc(100% - 48px),
+    var(--right-mask) calc(100% - 24px),
     var(--right-mask)
   );
 }