Skip to content

Fix: Ensure mobile navigation drawer background spans full viewport width#1127

Merged
saurabhraghuvanshii merged 3 commits into
layer5io:masterfrom
PARTH-TUSSLE:fix-mobile-nav-background
Jun 27, 2026
Merged

Fix: Ensure mobile navigation drawer background spans full viewport width#1127
saurabhraghuvanshii merged 3 commits into
layer5io:masterfrom
PARTH-TUSSLE:fix-mobile-nav-background

Conversation

@PARTH-TUSSLE

@PARTH-TUSSLE PARTH-TUSSLE commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Notes for Reviewers

This PR addresses the issue where the mobile navigation drawer's background gradient was not extending across the full viewport horizontally, leaving an exposed black area on the right side.

The .td-sidebar container on mobile viewports was previously inheriting a global width: auto rule from the .td-resizable-grid structure, causing it to shrink-to-fit its content rather than spanning the entire width of the screen.

Changes:

->Implemented Bootstrap's native breakpoint mixin (@include media-breakpoint-down(sm)) to cleanly override the sidebar's width to 100% on mobile devices.

->Kept the original, global width: auto rule for the rest of the .td-resizable-grid intact to ensure no unintended side-effects impact the main content wrapping behavior.
Removed unnecessary workarounds, resulting in clean, robust, and maintainable CSS.

Preview :
{6220DA78-A955-46F7-AD91-BE8DA92D62B7}

{7C62DF2F-16FD-443D-8041-3A332C958481}

This PR fixes #1120

Signed commits

  • [✅ ] Yes, I signed my commits.

Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request adds a mobile-specific media query to set the sidebar width to 100% in resizable grids. The feedback suggests a cleaner approach by scoping desktop-specific styles to desktop viewports to avoid overriding them on mobile, or alternatively using Bootstrap's native breakpoint mixins instead of hardcoded media queries.

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.

Comment thread assets/scss/_styles_project.scss Outdated
@github-actions

github-actions Bot commented Jun 27, 2026

Copy link
Copy Markdown
Contributor
PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-06-27 11:00 UTC

Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>
@PARTH-TUSSLE

Copy link
Copy Markdown
Contributor Author

@saurabhraghuvanshii saurabhraghuvanshii merged commit 377d10b into layer5io:master Jun 27, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI] Mobile Navigation drawer background not covering full viewport

2 participants