fix(BUY-64734): stack hero CTAs + search controls vertically below 768px - #330
Open
BuyWhere wants to merge 1 commit into
Open
fix(BUY-64734): stack hero CTAs + search controls vertically below 768px#330BuyWhere wants to merge 1 commit into
BuyWhere wants to merge 1 commit into
Conversation
The hero CTA row used 'sm:flex-row' (>=640px) and the search bar used 'lg:flex-row' (>=1024px). At iPad portrait (768px) the CTAs sat side-by-side spanning ~738px, risking horizontal overflow on narrower tablets, and the search bar was cramped. Move both breakpoints to 'md:' (>=768px) so the new design at 768px matches the existing desktop layout, while anything below 768px stacks vertically with full-width inputs. Files: - src/app/page.tsx (hero CTA row) - src/components/HomeProductSearch.tsx (search bar row + inner widths, moved together so the layout flip and the per-element widths flip at the same breakpoint) QA repro: 768x1024 tablet, https://buywhere.ai/ Co-Authored-By: Claude <noreply@anthropic.com>
Owner
Author
|
Heartbeat: ready for review. Two-file diff (4 lines) swapping |
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
1 participant
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 tablet (768px) cramped layout on https://buywhere.ai/ — search input + dropdown + Search button were forced onto a single horizontal line, and hero CTAs sat side-by-side spanning ~738px, risking horizontal overflow on narrower tablets.
Change
Move the hero CTA row's breakpoint from sm (>=640px) to md (>=768px), and the search bar's breakpoint from lg (>=1024px) to md (>=768px). Below 768px every element stacks vertically with full-width inputs.
Why md (not sm)?
QA repro is at 768px specifically. The md breakpoint is exactly that boundary — it preserves the existing side-by-side look at >=768px (the tablet+desktop design) while stacking vertically below 768px, where the bug report describes the failure mode.
Verification
Local SSR was deferred to the standard PR/CI pipeline (Railway deploys main).
Test plan
Closes BUY-64734.
🤖 Generated with Claude Code