fix: header navbar overflow between 480-768px viewport widths - #99
Merged
sajeetharan merged 2 commits intoAug 10, 2026
Merged
Conversation
- align button label/icon collapse breakpoint (was 480px) with the header's own compact-mode breakpoint (768px), removing a dead zone where the header was compacted but buttons still showed full text - make header__brand shrink/truncate before pushing action buttons off-screen at very narrow widths
|
@HereIsMuhammad is attempting to deploy a commit to the sajeetharan's projects Team on Vercel. A member of the Team first needs to authorize it. |
HereIsMuhammad
force-pushed
the
fix/header-mobile-responsive
branch
from
August 10, 2026 11:42
b792a51 to
755dcaf
Compare
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.
The problem
The header (navbar) starts compacting at the 768px breakpoint (reduced padding, subtitle hidden), but the button labels ("Add Me To Globe", "Star", "Sponsor") only collapsed to icon-only at 480px. That left a dead zone between 481px and 767px where the header was already tight but every button still showed full text, overflowing the compacted header on many phones and tablets.
The fix
.btn__label, turning "Add Me To Globe" into a circular icon button) from the 480px breakpoint to the 768px breakpoint, so the whole header compacts together at one point instead of two mismatched ones..header__brand(logo + title + subtitle) shrink and truncate with ellipsis instead of pushing the action buttons off-screen, as a safety net at very narrow widths like 320px.Only
styles/main.csschanged, no markup or behavior changes.Verified
npm installhere). Worth a quick check in DevTools responsive mode across ~400px to 800px widths before merge, since that's exactly the range this fixes.