Repository navigation
fix(ui): prevent search bar and toggle clipping on mobile viewports - #1367
Yashisinghal285 wants to merge 2 commits into
Conversation
Ensure .td-sidebar__search .td-search shrinks flexibly with min-width: 0 and flex: 1 1 auto, set .td-sidebar__toggle to flex: 0 0 auto, and apply symmetric mobile padding and clear negative margins on .td-sidebar-nav to prevent horizontal overflow on mobile viewports. Fixes layer5io#1366 Signed-off-by: Yashi <yashi.singhal410@gmail.com>
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Search layout and sidebar spacing assets/scss/_search_project.scss, assets/scss/_resizable-bootstrap-overrides.scss, assets/scss/_styles_project.scss |
The search and toggle use a full-width flex row. The search area can shrink, while the toggle does not. Mobile sidebar styles add horizontal padding and set navigation margins to zero. |
Estimated code review effort: 2 (Simple) | ~10 minutes
Change: Bug fix · Severity of issue fixed: Low
Possibly related PRs
- layer5io/docs#1360: Both PRs change responsive sidebar toggle behavior.
- layer5io/docs#1368: Both PRs change the sidebar toggle and layout in the responsive sidebar range.
Suggested reviewers: rahmanaisha, maanvi212006
Merge Risk: 
5d58f
-
The mobile layout changes appear ready to merge after normal checks; no actionable issue remains established.
Pre-merge checks: 
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check The title clearly and concisely describes the main change: preventing mobile search bar and toggle clipping. It matches the responsive sidebar CSS changes. Linked Issues check Issue #1366requires the search bar to fit the available width without clipping or horizontal overflow. The PR adds mobile flex sizing,min-width: 0, width limits, andwidth: 100%for the search e…Out of Scope Changes check The changes are limited to sidebar SCSS. The toggle, padding, and navigation margin changes support the same responsive clipping and overflow problem described in issue #1366. No unrelated product beh…Docstring Coverage No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat… Full details: Linked Issues check
-
Explanation
Issue
#1366requires the search bar to fit the available width without clipping or horizontal overflow. The PR adds mobile flex sizing,min-width: 0, width limits, andwidth: 100%for the search elements. It keeps the toggle from shrinking and normalizes sidebar padding and navigation margins. These changes address the reported mobile layout failure and preserve desktop behavior by scoping the search rules to mobile widths.
Full details: Out of Scope Changes check
-
Explanation
The changes are limited to sidebar SCSS. The toggle, padding, and navigation margin changes support the same responsive clipping and overflow problem described in issue
#1366. No unrelated product behavior or files are identified.
Full details: Docstring Coverage
-
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)
-
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.
|
🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-1367/
|
rahmanaisha
left a comment
rahmanaisha
left a comment
There was a problem hiding this comment.
Nice fix, and the diagnosis is spot on: the min-width: 0 chain on the search container and input is exactly what stops a flex item from refusing to shrink below its intrinsic content size, which is the classic Firefox overflow here. The symmetric 0.75rem padding and the cleared nav margins in the other two files round it out well, and the values agree across the two breakpoints so there is no conflict between them.
One scoping question below: the new flex block in _search_project.scss applies at every width, while the description frames it as a mobile fix and the other two changes are scoped below lg. If mobile-only is the intent, scoping it the same way keeps desktop layout untouched. Everything else looks ready.
| .td-sidebar { | ||
| .td-sidebar__search { | ||
| display: flex; | ||
| align-items: center; | ||
| width: 100%; | ||
| max-width: 100%; | ||
| box-sizing: border-box; | ||
|
|
||
| .td-search { | ||
| flex: 1 1 auto; | ||
| min-width: 0; | ||
| width: auto; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .td-search__input { | ||
| width: 100%; | ||
| min-width: 0; | ||
| } | ||
|
|
||
| .td-sidebar__toggle { | ||
| flex: 0 0 auto; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
This block is unconditional, so it also changes the desktop search row (for example width: 100% on the container), while the PR description frames it as a mobile fix and the other two changes here are scoped below lg. If mobile-only is the intent, wrapping it in the same below-lg breakpoint this file already uses keeps desktop untouched:
| .td-sidebar { | |
| .td-sidebar__search { | |
| display: flex; | |
| align-items: center; | |
| width: 100%; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| .td-search { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| width: auto; | |
| max-width: 100%; | |
| } | |
| .td-search__input { | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .td-sidebar__toggle { | |
| flex: 0 0 auto; | |
| } | |
| } | |
| } | |
| @media (max-width: 991.98px) { | |
| .td-sidebar { | |
| .td-sidebar__search { | |
| display: flex; | |
| align-items: center; | |
| width: 100%; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| .td-search { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| width: auto; | |
| max-width: 100%; | |
| } | |
| .td-search__input { | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .td-sidebar__toggle { | |
| flex: 0 0 auto; | |
| } | |
| } | |
| } | |
| } |
If the desktop restatement is deliberate, no change needed - just worth confirming, since the description says mobile.
There was a problem hiding this comment.
Good catch, thank you! I've updated the PR to scope the .td-sidebar__search flex block inside @media (max-width: 991.98px) to ensure the desktop layout remains completely untouched and aligns with the other below-lg changes.
Wrap .td-sidebar__search flexbox rules in @media (max-width: 991.98px) to align with below-lg mobile scoping and avoid modifying desktop search styles. Signed-off-by: Yashi <yashi.singhal410@gmail.com>
Ensure
.td-sidebar__search .td-searchshrinks flexibly withmin-width: 0andflex: 1 1 auto, set.td-sidebar__toggletoflex: 0 0 auto, and apply symmetric mobile padding and clear negative margins on.td-sidebar-navto prevent horizontal overflow on mobile viewports.Fixes #1366
Notes for Reviewers
This PR fixes #1366 where the search bar and toggle button were cut off on mobile viewports (especially prominent in Firefox and viewports around 414px or smaller).
Key Changes:
Flexbox Constraints on Mobile Search (
_search_project.scss):.td-sidebar__search .td-searchwithflex: 1 1 auto; min-width: 0; width: auto; max-width: 100%, allowing the search input container to shrink flexibly below intrinsic content sizes in Firefox and other browsers..td-search__inputwithmin-width: 0; width: 100%..td-sidebar__toggletoflex: 0 0 autoto prevent the toggle button from shrinking or overflowing.Mobile Padding & Margin Normalization (
_resizable-bootstrap-overrides.scss,_styles_project.scss):padding-left: 0.75rem; padding-right: 0.75rem;) to.td-sidebaron viewports< 992px(belowlg) to remove the previous asymmetric 0 right padding.margin-left: 0; margin-right: 0;) on.td-sidebar-navon mobile to prevent the expanded section navigation items and active borders from clipping horizontally.Verification:
414px × 846px(and smaller screens).Signed commits
Summary by CodeRabbit