fix:resolve horizontal scroll overflow on mobile viewports#1125
Conversation
Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the responsiveness of the project's layout by resetting the footer margin, making the navbar brand container fluid, and adjusting the navbar padding using media breakpoints. The reviewer suggested ensuring that any nested logo image inside the navbar brand scales fluidly on narrow viewports by applying responsive constraints.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>
|
Hey @rishiraj38 , @saurabhraghuvanshii , would appreciate a review. |
2 participants
Notes for Reviewers
This PR addresses an issue where documentation pages (e.g., /kanvas, /cloud, etc.) had an unintended horizontal scrollbar/extra white space on the right side on narrow mobile viewports.
Specific Changes:
Footer (_footer_project.scss): Replaced margin: -12px; with margin: 0;. The negative margin was pushing the footer 12px outside of its container on all sides.
Navbar Brand (_navbar_project.scss): Changed the hard-coded width: 280.06px; to max-width: 280.06px; width: 100%; so the logo shrinks fluidly on screens narrower than 280px.
Navbar Padding (_styles_project.scss): The .navbar-dark was applying a rigid 5rem horizontal padding globally, forcing the navbar to be at least 160px wider than its content. Wrapped the padding in a Bootstrap media-breakpoint-up(md) , defaulting to 1rem on mobile and preserving the 5rem padding for desktop layouts.
This PR fixes #1116
Signed commits