fix(navbar): prevent horizontal overflow

[KhaledSaeed18]

PR: Fix Navbar Horizontal Overflow

Description:

This PR fixes a layout issue on the Prisma Docs site where the navbar introduced horizontal scrolling on medium and large screens.

The problem was caused by rigid grid sizing in .navbar__inner. Both side columns were fixed at 324px, which caused the right column (Log In button + icons) to push outside the viewport and create a horizontal scrollbar.

Change Made:

File modified: src/css/custom.css

Before:

.navbar__inner {
  margin: auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 324px 1fr 324px;
}

After:

.navbar__inner {
  margin: auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: minmax(200px, 324px) 1fr minmax(200px, auto);
}

Screenshots:

Before Fix (overflow):

After Fix (no overflow):

'Home' page

Navbar grid system:

Before Fix

After Fix

Environment Verified

The issue and fix were tested on the following browsers, with consistent results:

• Google Chrome
• Brave
• Microsoft Edge

Closes #7143

Summary by CodeRabbit

• Style
  • Improved navbar header responsiveness by allowing side columns to flex between defined minimum and maximum widths, ensuring better adaptation across screen sizes.
  • Retains the existing three-column structure on narrower viewports, preserving current layout behavior.
  • Reduces risk of clipping or truncation in the header on wider or constrained screens.
  • Delivers smoother resizing behavior without altering functionality or user workflows.

[coderabbitai]

Walkthrough

Adjusts navbar grid layout in src/css/custom.css by changing grid-template-columns to use minmax for left and right columns: minmax(200px, 324px) 1fr minmax(200px, auto). Other responsive rules, including the existing @media (max-width: 1191px) block, remain unchanged.

Changes

Cohort / File(s)	Summary
Navbar grid responsiveness src/css/custom.css	Updated navbar header grid-template-columns from 324px 1fr 324px to minmax(200px, 324px) 1fr minmax(200px, auto) to allow flexible min widths while preserving max constraints; no other CSS rules modified.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• nikolasburk
• nurul3101
• Techboidesign
• ankur-arch
• mhessdev

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly indicates that the navbar overflow issue is being fixed and aligns directly with the CSS adjustment to prevent horizontal scrolling. It clearly identifies the affected component (navbar) and the intended outcome (prevent overflow).
Linked Issues Check	✅ Passed	The update to grid-template-columns from fixed pixel values to minmax(200px, 324px) 1fr minmax(200px, auto) directly resolves the overflow caused by rigid side columns and ensures the navbar remains responsive without horizontal scrolling on screens ≥769px.
Out of Scope Changes Check	✅ Passed	The pull request exclusively modifies the navbar’s grid definition in custom.css to address the horizontal overflow issue and does not introduce unrelated changes beyond the CSS rule adjustment.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 88faf31 and ec575c3.

📒 Files selected for processing (1)

• src/css/custom.css (1 hunks)

🔇 Additional comments (1)

src/css/custom.css (1)

676-676: LGTM on the responsive grid tweak.

Allowing the side tracks to shrink toward 200px eliminates the overflow without sacrificing the intended max widths, so the navbar stays within the viewport across the desktop breakpoints tested.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}