fix: mobile overflow on homepage for narrow screens (ZFlip6)#4336
Merged
ComputelessComputer merged 5 commits intomainfrom Mar 3, 2026
Merged
fix: mobile overflow on homepage for narrow screens (ZFlip6)#4336ComputelessComputer merged 5 commits intomainfrom
ComputelessComputer merged 5 commits intomainfrom
Conversation
- Add overflow-x-hidden to main container (consistent with solution pages) - Reduce hero title from text-4xl to text-3xl on mobile for narrow devices like ZFlip6 - Reduce submit button horizontal padding on mobile (px-4 vs px-6) to prevent cutoff Co-Authored-By: John <[email protected]>
✅ Deploy Preview for hyprnote-storybook canceled.
|
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
…screens - Reduce hero title from text-3xl to text-2xl on mobile (h1 was 423px at text-3xl on 360px viewport) - Reduce subtitle from text-lg to text-base on mobile - Add max-w-full and overflow-hidden to hero text container to prevent overflow Co-Authored-By: John <[email protected]>
- Add break-words (overflow-wrap: break-word) to h1 and subtitle - This handles the em-dash in 'Meetings—No' creating an unbreakable word - The Lora serif font is significantly wider than system fallback, causing text to overflow even at text-2xl without word-break support - Replace overflow-hidden with w-full on container to properly constrain Co-Authored-By: John <[email protected]>
In flex layouts, children default to min-width: auto which prevents shrinking below content intrinsic width. Adding min-w-0 at each level of the flex hierarchy allows overflow-wrap: break-word to actually break the long 'Meetings—No' em-dash word segment. Co-Authored-By: John <[email protected]>
Root cause: the section element is a flex child of a flex-col items-center container. Without w-full, it shrink-wraps to content width (423px for Lora serif font), exceeding the 360px viewport. Adding w-full forces it to respect parent width constraints. Co-Authored-By: John <[email protected]>
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 horizontal text overflow on the homepage when viewed on narrow mobile devices (e.g. Samsung ZFlip6 at ~360px width). Reported via community feedback — text was going off the sides and not wrapping properly.
Root cause: The hero section's flex containers (
flex-col items-center) lacked explicit width constraints. When the Lora serif webfont loaded (which is significantly wider than the system fallback font), the flex children expanded to their intrinsic content width (~423px), exceeding the 360px viewport. Becauseitems-centerdoesn't stretch children, and flex items default tomin-width: auto, the content couldn't shrink below its text width.Changes
overflow-x-hiddento the homepage<main>container — consistent with solution pages which already have this, acts as a safety netw-full min-w-0to the hero flex containers (parent div, section, inner div) — this is the core fix, forcing flex children to respect parent width instead of expanding to content widthbreak-words(overflow-wrap: break-word) to h1 and subtitle — allows the em-dash word segment "Meetings—No" to break if it exceeds the container widthtext-4xl→text-2xlon mobile (keepssm:text-5xlfor larger screens)text-lg→text-baseon mobile (keepssm:text-xlfor larger screens)px-4on mobile,sm:px-6on larger screens)Testing performed
Verified on deploy preview at 360px viewport width using Chrome DevTools responsive mode. The h1 element width went from 423px (overflowing) to 326px (within the 328px available space). Confirmed text wraps correctly even after Lora webfont finishes loading.
Review & Testing Checklist for Human
text-4xl→text-2xlchange is aggressive and affects ALL mobile devices belowsmbreakpoint. Confirm the title doesn't look too small on non-narrow phones.w-full min-w-0classes on the hero section containers should be harmless at desktop widths, but worth a quick visual checkbreak-wordsdoesn't cause awkward mid-word breaks at intermediate viewport widths (e.g. ~400-500px) where the Lora font might cause partial overflowNotes
fmtCI check fails on pre-existing formatting issues in unrelated desktop app files (tab-content.tsx,view.tsx,session.tsx) — not caused by these changes and not a required checksearch.tsx(unrelated to these changes)