fix(header): fix responsive breakpoints and prevent logo/nav text collision#17
Merged
grunch merged 1 commit intoMostroP2P:mainfrom Mar 18, 2026
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughHeader component changes tighten responsive behavior across two breakpoints (1280px, 1100px), prevent logo/content squeezing via flex adjustments, and refactor mobile menu toggle to use a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/Header.astro (1)
193-219: Comments don't match actual breakpoint values.
- Line 194: Comment says "1025px–1200px" but the media query at line 198 is
max-width: 1280px- Line 214: Comment says "≤1024px" but the media query at line 219 is
max-width: 1100px- Line 216: Comment says "Raised from 768px → 1024px" but actual breakpoint is 1100px
Consider updating comments to match the actual breakpoint values to avoid confusion.
📝 Proposed comment corrections
/* - * Tier 1 — Graceful compression (1025px–1200px) + * Tier 1 — Graceful compression (1101px–1280px) * The nav has 8 items. This tier tightens spacing to keep all * links visible on large tablets / small laptops before collapsing. */ `@media` (max-width: 1280px) { ... } /* - * Tier 2 — Mobile / tablet collapse (≤1024px) - * Raised from 768px → 1024px. With 8 nav items the minimum - * comfortable desktop width is ~1100px. 1024px is the nearest - * industry-standard breakpoint (Tailwind lg, iPad landscape). + * Tier 2 — Mobile / tablet collapse (≤1100px) + * Raised from 768px → 1100px. With 8 nav items the minimum + * comfortable desktop width is ~1100px. */ `@media` (max-width: 1100px) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Header.astro` around lines 193 - 219, The comments above the media query blocks are out of sync with the actual breakpoints; update the comment texts to match the CSS values used (e.g., change the "1025px–1200px" description to reflect `@media` (max-width: 1280px) and change "≤1024px" and "Raised from 768px → 1024px" to reference `@media` (max-width: 1100px) or reword to "Raised from 768px → 1100px"); locate the blocks by the unique selectors/media queries `@media` (max-width: 1280px) and `@media` (max-width: 1100px) in Header.astro and edit the human-readable ranges/descriptions so they accurately describe the implemented breakpoints.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Header.astro`:
- Around line 83-92: The standalone `.logo-icon` rule currently follows the
media query and thus overrides its `font-size` due to the same specificity; move
the `.logo-icon { font-size: 1.6rem; }` rule so it appears before the `@media
(max-width: 480px)` block (near the `.logo` rule) so the media query's
`.logo-icon { font-size: 1.35rem; }` can correctly override on small viewports,
leaving the rest of the selectors unchanged.
---
Nitpick comments:
In `@src/components/Header.astro`:
- Around line 193-219: The comments above the media query blocks are out of sync
with the actual breakpoints; update the comment texts to match the CSS values
used (e.g., change the "1025px–1200px" description to reflect `@media` (max-width:
1280px) and change "≤1024px" and "Raised from 768px → 1024px" to reference
`@media` (max-width: 1100px) or reword to "Raised from 768px → 1100px"); locate
the blocks by the unique selectors/media queries `@media` (max-width: 1280px) and
`@media` (max-width: 1100px) in Header.astro and edit the human-readable
ranges/descriptions so they accurately describe the implemented breakpoints.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 64650e7d-c81e-460b-b9cf-af915595bf1d
📒 Files selected for processing (1)
src/components/Header.astro
…lision The header navigation was visually broken across two viewport ranges: 1. Tablets / small laptops (769px-1100px): The desktop nav was visible but the 8 navigation items overflowed, causing the logo text 'Mostro.community' to collide directly with 'Communities', rendering as 'Mostro.communityCommunities' with no space between them. 2. Narrow phones (320px-405px): The language switcher button was being squeezed against the logo due to missing flex constraints. Root causes and fixes applied to src/components/Header.astro: - Raise mobile collapse breakpoint 768px to 1100px - Add two-tier responsive strategy with @media (max-width: 1280px) graceful compression tier before full mobile collapse - Harden .logo with flex-shrink: 0 and white-space: nowrap - Add @media (max-width: 480px) logo scaling for narrow phones - Add min-width: 0 to .header-inner for correct flex child behaviour - Fix mobile menu JS toggle to use data-mobile-open attribute - Improve aria-expanded management on hamburger button Tested at: 320px, 375px, 405px, 480px, 768px, 769px, 900px, 1025px, 1060px, 1100px, 1101px, 1280px, 1440px All 5 locales verified (EN, ES, FR, IT, PT).
codaMW
force-pushed
the
fix/header-nav-responsive-breakpoint
branch
from
483c306 to
c5fbb8c
Compare
Contributor
Author
|
Fixed in the amended commit. Moved |
Member
|
@codaMW thank you for your contribution!! |
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 a responsive layout bug where the header logo text
Mostro.communitycollides with the first navigation item (
Communities) at viewport widthsbetween 769px and ~1100px, producing broken text
Mostro.communityCommunities.A secondary issue caused the language switcher to collide with the logo on
narrow phones (320px–405px).
Root Cause
The header's
@media (max-width: 768px)breakpoint was set too low. Thenavigation contains 8 items (Communities, How it works, Get started,
FAQ, Guide, Join the Program, Mostro Protocol, Language dropdown) requiring
approximately 1100px minimum width to render cleanly. Any viewport
between 769px and ~1100px caused the flex container to crush items together.
Three compounding factors made this worse:
.logowas missingflex-shrink: 0andwhite-space: nowrap.header-innerwas missingmin-width: 0nav.style.display(inline style) whichis always
''on first click CSS-applieddisplay:nonedoes notset the inline property causing the menu to fail on first tap
Changes:
src/components/Header.astro768px→1100pxfor mobile collapse@media (max-width: 1280px)tightens gap/font before collapseflex-shrink: 0+white-space: nowrapadded to.logo@media (max-width: 480px)scales logo down for iPhone SE rangemin-width: 0added to.header-innerdata-mobile-openattribute replaces unreliablestyle.displaycheckaria-expandednow correctly toggled on hamburger buttonViewport Coverage
Testing
Tested in Chrome DevTools responsive mode at:
320 / 375 / 405 / 480 / 768 / 769 / 900 / 1025 / 1060 / 1100 / 1101 / 1280 / 1440pxAll 5 locales verified: EN, ES, FR, IT, PT
Checklist
src/components/Header.astro)aria-expandedcorrectly toggledSummary by CodeRabbit