Skip to content

Fix navbar crowding at intermediate viewport sizes#225

Open
nate-double-u with Copilot wants to merge 5 commits into
mainfrom
copilot/fix-title-bar-crowding
Open

Fix navbar crowding at intermediate viewport sizes#225
nate-double-u with Copilot wants to merge 5 commits into
mainfrom
copilot/fix-title-bar-crowding

Conversation

Copilot AI commented Mar 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Navbar items collide at viewport widths between 997px (mobile breakpoint) and ~1400px due to default Infima padding, full-size logo, and 200px search input competing for space.

Added three responsive breakpoints in src/css/custom.css that progressively reclaim space from the logo, search box, and navbar container padding so menu items can maintain proper visual separation:

  • 1280px–1399px: item padding 0.75rem→0.625rem, search width →10rem
  • 997px–1279px: navbar container padding 1rem→0.5rem, item padding 0.75rem→0.5rem, font size →0.875rem, logo height 2.5rem→1.75rem, search width →7rem
  • 997px–1099px: item padding →0.4rem, font size →0.8rem, logo height →1.5rem, search width →6rem

No menu items removed. Left/right divide preserved. Desktop (≥1400px) and mobile (≤996px) unaffected.

Before (1024px)

After (1024px)

After (1280px)

Original prompt

This section details on the original issue you should resolve

<issue_title>Title bar crowded at some viewport sizes</issue_title>
<issue_description>Image</issue_description>

<agent_instructions>The title bar is crowded at some viewport sizes. Dont' remove any menu items, but see if you can space things better. Keep the left/right divide that exsists on the menu. Potentially, reduce teh size of the search box, or reduce the space between menu items. Pay attention to all viewport sizes, not just the one in the screen capture.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@netlify

netlify Bot commented Mar 13, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for contribute-cncf-io ready!

Name Link
🔨 Latest commit 2ab371d
🔍 Latest deploy log https://app.netlify.com/projects/contribute-cncf-io/deploys/69b488aea153650008f20ee6
😎 Deploy Preview https://deploy-preview-225--contribute-cncf-io.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@nate-double-u
fix: reduce navbar crowding at intermediate viewport sizes
13a1dda 
Add responsive CSS media queries to reduce item padding, font size,
logo height, and search box width between 997px and 1279px viewport
widths. This prevents navbar items from appearing crowded without
removing any menu items.

Co-authored-by: nate-double-u <4453979+nate-double-u@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix title bar crowded at some viewport sizes Fix navbar crowding at intermediate viewport sizes Mar 13, 2026
Copilot AI requested a review from nate-double-u March 13, 2026 16:09
@nate-double-u nate-double-u marked this pull request as ready for review March 13, 2026 16:11
@nate-double-u nate-double-u requested review from a team as code owners March 13, 2026 16:11
nate-double-u
nate-double-u requested changes Mar 13, 2026
View reviewed changes

@nate-double-u nate-double-u left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still crowded at some viewport sizes:

Image

@nate-double-u
fix: more aggressively reduce logo and search to improve navbar spacing
a130d62 
Reclaim space from logo and search box instead of squeezing item
padding. Reduces navbar container padding, logo height, and search
width more aggressively so menu items can maintain better visual
separation at intermediate viewport sizes (997px–1279px).

Co-authored-by: nate-double-u <4453979+nate-double-u@users.noreply.github.com>

Copilot AI commented Mar 13, 2026

Copy link
Copy Markdown
Contributor Author

It's still crowded at some viewport sizes:

Image

Revised the approach in a130d62 — instead of just squeezing item padding (which kept items fitting but looking packed), I now reclaim space more aggressively from the logo and search box so menu items can maintain better visual separation:

  • Logo: 2.5rem → 1.75rem (and 1.5rem at narrowest)
  • Search: 12.5rem → 7rem (and 6rem at narrowest)
  • Navbar container padding: 1rem → 0.5rem
  • Item padding kept higher at 0.5rem / 0.4rem for visible gaps between text

At 1024px:
after-1024

At 1200px:
after-1200

Copilot AI requested a review from nate-double-u March 13, 2026 16:23
nate-double-u
nate-double-u requested changes Mar 13, 2026
View reviewed changes

@nate-double-u nate-double-u left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's very close, but at this exact view-port, it's still crowded. See the circled bit in the screenshot:

Image

@nate-double-u
fix: add 1280-1399px breakpoint to preserve left/right navbar gap
589aeea 
At 1280px without responsive CSS, all items fill the navbar with zero
gap between the left and right groups, losing the left/right menu
divide. Added a gentle breakpoint that reduces item padding
(0.75rem→0.625rem) and search width (200px→10rem) to maintain visible
group separation at this range.

Co-authored-by: nate-double-u <4453979+nate-double-u@users.noreply.github.com>

Copilot AI commented Mar 13, 2026

Copy link
Copy Markdown
Contributor Author

It's very close, but at this exact view-port, it's still crowded. See the circled bit in the screenshot:

<img width="1392" height="1527" alt="Image" src="https://github.com/user-attachments/assets/ae...

The issue was at 1280px — my responsive CSS previously stopped at 1279px, so at exactly 1280px all items reverted to full-size defaults, filling the entire navbar width with zero gap between the left and right groups. Added a new gentle breakpoint for 1280–1399px in 589aeea that reduces item padding (0.75rem → 0.625rem) and search width (200px → 10rem) to preserve the left/right divide.

At 1280px (now 31px gap between groups):
after-1280

Copilot AI requested a review from nate-double-u March 13, 2026 16:39
nate-double-u
nate-double-u approved these changes Mar 13, 2026
View reviewed changes

@nate-double-u nate-double-u left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/lgtm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@krook krook Awaiting requested review from krook
@thisisobate thisisobate Awaiting requested review from thisisobate
1 more reviewer
@nate-double-u nate-double-u nate-double-u approved these changes
Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

@nate-double-u nate-double-u

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Title bar crowded at some viewport sizes

2 participants

@nate-double-u