Skip to content

fix(home): align the voices and slider rails with the page - #58

Merged
ZeeshanAdilButt merged 1 commit into
mainfrom
fix/rail-alignment
Oct 27, 2026
Merged

ZeeshanAdilButt merged 1 commit into
mainfrom
fix/rail-alignment

Conversation

@ZeeshanAdilButt

Copy link
Copy Markdown
Member

The first card in rails (fellow voices, programs, products, mentors) now lines up with the section heading, and stays there after scrolling.

Cause

  • The rails use mandatory snap with an inset padding but no matching scroll-padding, so the browser snapped the first card to the screen edge.
  • The voices rail measured its inset from 100vw, which includes the scrollbar, putting the first card 8px right of the heading on desktop.

Fix

  • Add matching scroll-padding to the voices rail, the shared Slider and the Start where you are chips.
  • Measure the voices inset from 100% instead of 100vw.

Testing

  • At 1680px: heading and first voice card both at 256px, before and after scrolling. Programs slider aligned too.
  • At 375px: all at 24px, no horizontal overflow.
  • tsc clean on the changed files.

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.
@ZeeshanAdilButt
ZeeshanAdilButt merged commit cf867de into main Oct 27, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant