Skip to content

fix(layout): remove boxed page constraints and restore full-width vie…#725

Open
Jash-Khunt wants to merge 1 commit into
AOSSIE-Org:mainfrom
Jash-Khunt:fix/full-width-layout-restoration
Open

fix(layout): remove boxed page constraints and restore full-width vie…#725
Jash-Khunt wants to merge 1 commit into
AOSSIE-Org:mainfrom
Jash-Khunt:fix/full-width-layout-restoration

Conversation

@Jash-Khunt
Copy link
Copy Markdown

@Jash-Khunt Jash-Khunt commented May 25, 2026 •
edited by coderabbitai Bot
Loading

Addressed Issues

Fixes #722

Screenshots / Recordings

Before

image

After

image

Additional Notes

Background Layout Fix

Replaced the fixed inset-sheet layout in layout.jsx with direct background declarations on the <body> element using:

bg-white dark:bg-zinc-900

This fully removes the unwanted outer side columns visible on larger screens.

Fluid Layout Improvements

Updated OuterContainer in Container.jsx from a constrained width layout to max-w-none, allowing decorative background elements and sections to scale naturally across wider viewports.

Hero Section Refinement

Wrapped the hero text, logos, and branding content in page.jsx inside a focused:

max-w-7xl mx-auto

container to preserve readability while maintaining responsive full-width behavior.

Result

The homepage now properly utilizes available viewport width across large displays while keeping core content centered and visually balanced.

AI Usage Disclosure

  • This PR does not contain AI-generated code at all.
  • This PR contains AI-assisted code. I have read the AI Usage Policy and verified that the implementation complies with project guidelines. All changes were reviewed, tested locally, and validated by me.

AI tools used:

  • Antigravity Coding Assistant (Gemini 3.5 Flash)

Checklist

  • My PR addresses a single issue, fixes a single bug, or makes a single improvement.
  • My code follows the project's code style and conventions.
  • If applicable, I have updated related documentation.
  • If applicable, I have added or updated tests.
  • My changes introduce no new warnings or errors.
  • I have joined the Discord server and will share this PR with the maintainers there.
  • I have read the Contribution Guidelines.
  • I will address CodeRabbit AI review comments if generated.
  • I have completed this PR template carefully and accurately.

Summary by CodeRabbit

  • Style
    • Updated background colors for improved visual contrast
    • Removed fixed overlay element from main layout for a cleaner appearance
    • Adjusted hero section layout containment for better responsive design

Review Change Stack

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 25, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 64a10ddc-2167-425c-9339-fd8f85b5dd7f

📥 Commits

Reviewing files that changed from the base of the PR and between 895772c and d31ff34.

📒 Files selected for processing (3)
  • src/app/layout.jsx
  • src/app/page.jsx
  • src/components/shared/Container.jsx
📝 Walkthrough

Walkthrough

The pull request fixes a layout constraint issue by removing the outer container's maximum-width limit, allowing website content to expand to full viewport width. Root layout styling is updated with new background colors and simplified structure, while the home page hero section receives explicit width containment to maintain readable proportions within the wider layout.

Changes

Full-Width Layout Expansion

Layer / File(s) Summary
Container max-width constraint removal
src/components/shared/Container.jsx		 OuterContainer's Tailwind class changed from max-w-7xl to max-w-none, removing the horizontal expansion limit.
Root layout styling and overlay cleanup
src/app/layout.jsx		 Body background colors updated to bg-white/dark:bg-zinc-900, and fixed inset overlay/ring markup removed, simplifying the layout structure.
Home page structure and hero section containment
src/app/page.jsx		 Hero section wrapped in mx-auto max-w-7xl w-full div for appropriate containment; Stats, Projects grid, and Banner sections reflowed without substantive logic changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • Zahnentferner

Poem

🐰 The width constraint is gone, hooray!
No more bars on either side of the day,
From max-width limits, we set content free,
Full viewport expansion—as wide as can be!
Layout flows naturally, left to right,
The website now wears the screen just right ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the main change: removing boxed page constraints and restoring full-width layout to match the PR's primary objective.
Linked Issues check ✅ Passed The PR comprehensively addresses issue #722 by removing the inset-sheet layout from layout.jsx, updating OuterContainer to max-w-none, and wrapping hero content in a centered container.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing the layout constraints issue: styling updates to body background, OuterContainer width adjustment, and hero section wrapping.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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 and usage tips.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG]: Website layout does not fill the entire screen width inside browser window

1 participant

@Jash-Khunt