From 21165ddb698a549cbebdde083f66053ec1a89804 Mon Sep 17 00:00:00 2001
From: Zeeshan Adil <zeeabutt@outlook.com>
Date: Wed, 28 Oct 2026 01:14:20 +0500
Subject: [PATCH] fix(home): keep rails aligned with the page after scrolling

Mandatory snapping pulled the first card to the screen edge because the rails had padding but no matching scroll padding. The voices rail also measured its inset from 100vw, which includes the scrollbar, so it sat 8px right of the heading. Rails now snap inside the same inset as the content.
---
 components/home/voices.tsx     | 2 +-
 components/site/slider.tsx     | 2 +-
 components/site/start-here.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/home/voices.tsx b/components/home/voices.tsx
index 9919b04..a3c9fac 100644
--- a/components/home/voices.tsx
+++ b/components/home/voices.tsx
@@ -61,7 +61,7 @@ export function VoicesRail() {
         tabIndex={0}
         role="region"
         aria-label="Stories from our community. Scroll sideways to see more."
-        className="hm-scroll mt-12 flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth px-[max(24px,calc((100vw-1200px)/2+24px))] pb-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#0A0A0A]"
+        className="hm-scroll mt-12 flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth px-[max(24px,calc((100%-1200px)/2+24px))] scroll-px-[max(24px,calc((100%-1200px)/2+24px))] pb-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#0A0A0A]"
       >
         {videos.map((video) => (
           <article key={video.name} className="w-[360px] shrink-0 snap-start overflow-hidden rounded-[20px] border border-[#E6E6E6]">
diff --git a/components/site/slider.tsx b/components/site/slider.tsx
index 7b35bf2..b989e77 100644
--- a/components/site/slider.tsx
+++ b/components/site/slider.tsx
@@ -44,7 +44,7 @@ export function Slider({
       <ul
         ref={track}
         aria-label={label}
-        className="-mx-6 flex snap-x snap-mandatory gap-4 overflow-x-auto px-6 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        className="-mx-6 flex snap-x snap-mandatory scroll-px-6 gap-4 overflow-x-auto px-6 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       >
         {children.map((child, index) => (
           <li key={index} className={`flex shrink-0 snap-start ${itemClassName}`}>
diff --git a/components/site/start-here.tsx b/components/site/start-here.tsx
index 3cce55a..44eda3d 100644
--- a/components/site/start-here.tsx
+++ b/components/site/start-here.tsx
@@ -30,7 +30,7 @@ export function StartHere() {
         <div
           role="tablist"
           aria-label="Who are you"
-          className="-mx-6 mt-8 flex snap-x gap-2 overflow-x-auto px-6 pb-2 [scrollbar-width:none] md:mx-0 md:flex-wrap md:overflow-visible md:px-0 [&::-webkit-scrollbar]:hidden"
+          className="-mx-6 mt-8 flex snap-x scroll-px-6 gap-2 overflow-x-auto px-6 pb-2 [scrollbar-width:none] md:mx-0 md:flex-wrap md:overflow-visible md:px-0 [&::-webkit-scrollbar]:hidden"
         >
           {startPaths.map((p) => {
             const active = p.id === selected