Repository navigation
fix(website): wrap preview tab strip on mobile, align selected tab with body - #8
Merged
Merged
Conversation
…th body The PreviewTabs row used overflow-x-auto with nowrap labels, producing a horizontal scrollbar on narrow screens and clipping later tabs. The first tab was also visually highlighted while tabs[1].body was rendered. Replace overflow-x-auto with flex-wrap so all labels stay visible without scrolling, and drive both the highlight and the rendered body from a single activeTabIndex so the selected tab matches the preview. Closes #7
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
alepes-website | decf083 | Sep 07 2026, 11:11 AM |
raelldottin
commented
Sep 7, 2026
raelldottin
left a comment
raelldottin
left a comment
Contributor
Author
There was a problem hiding this comment.
Self-review (solo-maintainer exception)
Scope: single-file fix to src/app/page.tsx (PreviewTabs), +10/−4.
Correctness findings:
- Root causes confirmed: row used
overflow-x-auto+ nowrap labels → horizontal scrollbar / clipped tabs on mobile;first:bg-brand/10 first:text-brandhighlightedOverviewwhiletabs[1].bodyrenderedFormation. - Fix removes
overflow-x-autoin favor offlex-wrap(labels wrap, no side-scroll, desktop unchanged where width allows), and drives both the highlight and the rendered body from a singleactiveTabIndex = 1— selected tab now matches the preview. - Deliberately keeps the preview static (no fake interactive tab switching), consistent with the repo's read-only marketing scope.
Verification: full validation ladder passed locally — bun install --frozen-lockfile, tsc --noEmit, oxlint (only pre-existing warnings), bun run test (12/12), bun run build (emits out/index.html), git diff --check. CI green on exact head.
Material findings: none.
Reviewed-by self per the recorded exception; merging with a normal merge commit (not squash).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Product Preview tab strip (
PreviewTabsinsrc/app/page.tsx) usedflex gap-1 overflow-x-autowithwhitespace-nowraplabels, which produced a horizontal scrollbar on narrow screens and clipped the later tabs.It also had a consistency bug: the first tab (
Overview) was visually highlighted viafirst:bg-brand/10 first:text-brand, while the rendered body wastabs[1].body(Formation).Change
overflow-x-autowithflex-wrapso all labels stay visible without side-scrolling on mobile (desktop appearance is unchanged when there's enough width).activeTabIndex = 1and drive both the highlight and the rendered body from it, so the selected tab matches the preview.Validation
All ladder steps pass locally:
bun install --frozen-lockfile✓bunx tsc --noEmit✓bunx oxlint✓ (only pre-existing warnings invitest.config.mts/sonner.tsx)bun run test✓ (12/12)bun run build✓ (static export →out/index.html)git diff --check✓Closes #7