Skip to content

fix: nav being clipped when browser width was between 1025 and 1110px - #783

Open
NoahMLoomis wants to merge 1 commit into
oss-apps:mainfrom
NoahMLoomis:fix/781-nav-clipped
Open

NoahMLoomis wants to merge 1 commit into
oss-apps:mainfrom
NoahMLoomis:fix/781-nav-clipped

Conversation

@NoahMLoomis

@NoahMLoomis NoahMLoomis commented Oct 25, 2026 •

Copy link
Copy Markdown

Description

This PR fixes issue #781 of the nav getting clipped when the width was between 1025px and 1110px.

Everything remains centered on the screen

Demo

Before:
image

After:
image

Checklist

  • I have read CONTRIBUTING.md in its entirety
  • I have performed a self-review of my own code
  • The last commit successfully passed pre-commit checks
  • Any AI code was thoroughly reviewed by me

Summary by CodeRabbit

  • Style
    • Updated the desktop layout to use a three-column grid. Navigation now aligns to the end of its grid column instead of appearing offset with a fixed-width sidebar. This changes how the navigation and main content are positioned on desktop screens.

@coderabbitai

coderabbitai Bot commented Oct 25, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 805d4294-1bd9-4e7a-a66d-cacd6caf59cd
Commits

Reviewing files that changed from the base of the PR and between 3583568 and 36c1656.

Files selected for processing: 1
  • src/components/Layout/MainLayout.tsx

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

Walkthrough

The desktop layout changes from a centered flex container to a three-column grid. The navigation no longer uses a fixed width or negative margin and aligns to the end of its grid column.

Changes: Desktop layout

Layer / File(s) Summary
Desktop grid layout
src/components/Layout/MainLayout.tsx
The desktop container changes to a three-column grid. The navigation drops its fixed width and negative margin, and aligns to the end of its grid column.

Priority: Low

Estimated code review effort: 2 (Simple) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Low

Possibly related issues

  • Issue 781 describes desktop navigation clipping at viewport widths between 1025px and 1110px. This layout change removes the fixed width and negative margin cited in the issue.

Suggested reviewers: kmkoushik

Merge Risk: Minimal · up to 36c16

The navigation layout fix is mergeable with no identified material risk.

Pre-merge checks: Passed 5
Check name Status Explanation
Title check Passed The title clearly identifies the main change: fixing navigation clipping at browser widths between 1025px and 1110px.
Description check Passed The description includes the change summary, issue reference, centered-layout detail, before-and-after demo images, and most checklist items. The unit-test checklist item is omitted, but the descripti…
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description includes the change summary, issue reference, centered-layout detail, before-and-after demo images, and most checklist items. The unit-test checklist item is omitted, but the description is otherwise complete.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files.

Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

Comment @coderabbitai help to get the list of available commands.

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant