fix(landing): make hero demo tabs responsive on mobile (fixes #2321) - #3391
Open
CountClaw wants to merge 1 commit into
Open
fix(landing): make hero demo tabs responsive on mobile (fixes #2321)#3391CountClaw wants to merge 1 commit into
CountClaw wants to merge 1 commit into
Conversation
…nt-ai#2321) The demo panel's category tab strip combined flex-wrap with overflow-x-auto, so on mobile the tabs neither wrapped cleanly nor scrolled predictably — the active pill and labels could overflow the card. Drop flex-wrap on mobile (single scrollable row) and keep the wrapped layout for md+ where there is room. The flow list inside the demo panel also truncated each tab label hard on narrow widths ('Like Twitter replies and exp...'). Give the label a min-w-0/flex-1 truncate pair with a shrink-0 timestamp so the row lays out without the timestamp pushing the label off-screen.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Contributor
|
@Kyou12138 is attempting to deploy a commit to the Different AI Team on Vercel. A member of the Team first needs to authorize it. |
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
2 participants
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
Fixes #2321 — the landing hero's demo panel tabs break on mobile: the category tab strip overflows the card and the flow-list labels truncate aggressively.
Root cause (current code)
landing-home.tsx): the chip container usedflex-wrapandoverflow-x-autotogether. On a narrow viewport these conflict — the row neither wraps cleanly nor scrolls predictably, so the active pill and labels can overflow the card edge.landing-app-demo-panel.tsx): each flow button put atruncatelabel next to awhitespace-nowraptimestamp with onlymr-2separating them. On narrow widths the timestamp pushed the label off-screen, truncating it to e.g.Like Twitter replies and exp....Changes
landing-home.tsx: dropflex-wrapon mobile so the tab strip is a single scrollable row; restoreflex-wrap+overflow-visibleatmdwhere there is room. Desktop behaviour is unchanged.landing-app-demo-panel.tsx: give the label amin-w-0 flex-1 truncatepair and the timestampshrink-0, so the row lays out correctly and the timestamp never pushes the label off-screen.No layout changes above
md.Notes
The original report (June 2026) predates several landing refactors; the hero headline and CTA row are already responsive in the current code. This PR targets the two mobile breakages that remain in the current demo panel.
tsc --noEmitreports no new errors in the touched files (pre-existing unrelated type errors inpackages/emailandpackages/uiare not introduced here).