fix: settings bar fade

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" },

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>

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)
   );
 }