From 81225a764a21efcc510596795a8109549a71fbac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 16 May 2026 18:00:38 +0200
Subject: [PATCH] fix(settings): scroll-snap on the mobile section strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`no-scrollbar` already suppresses the painted scrollbar so the strip
doesn't look like every settings card has an overflow problem. The
`snap-x snap-mandatory` layer on the strip plus `snap-start` on each
chip means a swipe-flick lands on the next chip's leading edge instead
of the in-between dead zone — the auto-scroll-into-view effect on
mount stays the canonical positioner for the active chip; snap is the
polish layer for manual flicks.
---
 src/components/settings/settings-shell.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/settings-shell.tsx b/src/components/settings/settings-shell.tsx
index 5214d3397..6fff0f990 100644
--- a/src/components/settings/settings-shell.tsx
+++ b/src/components/settings/settings-shell.tsx
@@ -179,18 +179,25 @@ export function SettingsShell({ active, children }: SettingsShellProps) {
           scrolling still work. Without it the 10-section strip
           renders an always-on scrollbar at the top of every settings
           page, which makes the page feel like every section card has
-          an overflow problem. */}
+          an overflow problem.
+
+          v1.4.33 IW7 — `snap-x snap-mandatory` lets a swipe-flick land
+          on the next chip's leading edge instead of the in-between
+          dead zone. The auto `scrollIntoView({inline: "center"})`
+          effect above stays the canonical positioner for the active
+          chip; snap is the polish layer when the user manually flicks
+          through the strip without tapping. */}
       <nav
         ref={mobileStripRef}
         aria-label={t("settings.shell.sectionsNav")}
-        className="no-scrollbar -mx-4 mb-4 overflow-x-auto px-4 md:hidden"
+        className="no-scrollbar -mx-4 mb-4 snap-x snap-mandatory overflow-x-auto px-4 md:hidden"
       >
         <ul className="flex min-w-max gap-2">
           {SETTINGS_SECTIONS.map((section) => {
             const isActive = section.slug === activeSlug;
             const Icon = section.icon;
             return (
-              <li key={section.slug}>
+              <li key={section.slug} className="snap-start">
                 <Link
                   href={`/settings/${section.slug}`}
                   aria-current={isActive ? "page" : undefined}