Skip to content

fix(docs): remove scrollbars and fix card alignment on the home page - #28

Merged
pungoyal merged 2 commits into
mainfrom
fix/outcome-grid-scrollbars
Sep 21, 2026
Merged

pungoyal merged 2 commits into
mainfrom
fix/outcome-grid-scrollbars

Conversation

@pungoyal

@pungoyal pungoyal commented Sep 21, 2026 •

Copy link
Copy Markdown
Owner

What and why

Three layout fixes on the home page:

  • Outcome grid scrollbars. The 2×2 grid's table was widened past its wrapper with negative margins, and the wrapper had overflow-x: auto, so it always showed both scrollbars. Both are removed; below 40rem the grid already stacks into cards.
  • Install command scrollbar. The one-line install command scrolled horizontally. It now wraps after a slash (<wbr>), so it's always shown in full with no scrollbar: one line wide enough to fit, two or three lines on phones.
  • "Is it the right tool for you?" cards. Starlight's spacing between consecutive blocks pushed the second card down. Both cards now start at the same height, with even padding.

How was this tested?

  • npm run build passes

  • Measured in a browser at 1440, 1024, 800, 700, 640, 390 and 320 px wide: nothing scrolls (scroll size equals client size), the page has no horizontal overflow, and both cards have the same top and height at desktop widths

  • Screenshots checked in light and dark themes

  • scenario test added or updated (internal/dotsync/dotsync_test.go): n/a, CSS only

  • docs in website/src/content/docs/ updated if behavior changed

  • this change cannot lose a local modification without a backup, or resolve a conflict silently

🤖 Generated with Claude Code

pungoyal and others added 2 commits September 21, 2026 11:21
The grid widened its table past its wrapper with negative margins to line up
the cell gaps, and the wrapper scrolled on overflow, so every browser showed
both scrollbars. Drop both; on narrow screens the grid already stacks into
cards.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- The install command wraps after a slash instead of scrolling, so it's
  always shown in full, with no scrollbar.
- The two "Is it the right tool for you?" cards now start at the same height:
  Starlight's spacing between consecutive blocks pushed the second one down.
  Their padding is even too.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@pungoyal pungoyal changed the title fix(docs): remove scrollbars from the home page's outcome grid fix(docs): remove scrollbars and fix card alignment on the home page Sep 21, 2026
@pungoyal
pungoyal marked this pull request as ready for review September 21, 2026 11:36
@pungoyal
pungoyal merged commit fd7b1d0 into main Sep 21, 2026
20 checks passed
@pungoyal
pungoyal deleted the fix/outcome-grid-scrollbars branch September 21, 2026 13:52
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