fix(mobile): sidebar overlaps content on medium-sized screens#9870
Open
fix(mobile): sidebar overlaps content on medium-sized screens#9870
Conversation
Contributor
|
Preview Deployment
|
jmelahman
force-pushed
the
jamison/medium-sidebar
branch
2 times, most recently
from
7a9361f to
9dcee62
Compare
jmelahman
force-pushed
the
jamison/medium-sidebar
branch
from
9dcee62 to
396f7a7
Compare
Contributor
Greptile SummaryThis PR fixes sidebar overlap on medium-sized screens (725–1232 px) by introducing a third layout mode: a folded icon-strip that stays in-flow via a spacer, while expanding to a fixed overlay with a blur-only backdrop. It also consolidates JS and Tailwind breakpoints (new Key changes:
Confidence Score: 4/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[SidebarRoot renders] --> B{isMobile?\nwidth ≤ 724px}
B -- Yes --> C[Fixed overlay\n-translate-x-full when folded\nBackdrop with bg-mask-03 + blur]
B -- No --> D{isMediumScreen?\nwidth ≤ 1232px}
D -- Yes --> E[Spacer div w-3.25rem in flow\n+ Fixed sidebar overlays when expanded\nBackdrop blur-only no tint]
D -- No --> F[Large screen\nSidebarWrapper inline\nFoldable if foldable=true]
E --> G{folded?}
G -- No --> H[Backdrop opacity-100\npointer-events-auto\nclick → close]
G -- Yes --> I[Backdrop opacity-0\npointer-events-none]
Prompt To Fix All With AIThis is a comment left during a code review.
Path: web/tailwind-themes/tailwind.config.js
Line: 67-71
Comment:
**Global breakpoint override affects existing `sm:*`, `md:*`, `lg:*` usages**
Adding `sm: "724px"`, `md: "912px"`, and `lg: "1232px"` inside `extend.screens` **overrides** Tailwind's default breakpoints (640 px, 768 px, 1024 px) globally. Any file in the codebase that already uses `sm:`, `md:`, or `lg:` responsive prefixes — `Modal.tsx`, `dialog.tsx`, `Popover.tsx`, `input.tsx`, `Badge.tsx`, `settings-layouts.tsx`, and ~15 others found — will silently shift to these new pixel values.
The affected screen ranges are:
- 640–724 px: `sm:` styles no longer apply (was 640 px, now 724 px)
- 768–912 px: `md:` styles no longer apply (was 768 px, now 912 px)
- 1024–1232 px: `lg:` styles no longer apply (was 1024 px, now 1232 px)
Those components were authored against Tailwind's standard defaults. If this consolidation is intentional, it's worth auditing all existing `sm:`, `md:`, and `lg:` usages to confirm none of them regress visually at the affected screen-width ranges.
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "fix(mobile): sidebar overlaps content on..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
67
to
71
| screens: { | ||
| sm: "724px", | ||
| md: "912px", | ||
| lg: "1232px", | ||
| "2xl": "1420px", |
Contributor
There was a problem hiding this comment.
sm:*, md:*, lg:* usages
Adding sm: "724px", md: "912px", and lg: "1232px" inside extend.screens overrides Tailwind's default breakpoints (640 px, 768 px, 1024 px) globally. Any file in the codebase that already uses sm:, md:, or lg: responsive prefixes — Modal.tsx, dialog.tsx, Popover.tsx, input.tsx, Badge.tsx, settings-layouts.tsx, and ~15 others found — will silently shift to these new pixel values.
The affected screen ranges are:
- 640–724 px:
sm:styles no longer apply (was 640 px, now 724 px) - 768–912 px:
md:styles no longer apply (was 768 px, now 912 px) - 1024–1232 px:
lg:styles no longer apply (was 1024 px, now 1232 px)
Those components were authored against Tailwind's standard defaults. If this consolidation is intentional, it's worth auditing all existing sm:, md:, and lg: usages to confirm none of them regress visually at the affected screen-width ranges.
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/tailwind-themes/tailwind.config.js
Line: 67-71
Comment:
**Global breakpoint override affects existing `sm:*`, `md:*`, `lg:*` usages**
Adding `sm: "724px"`, `md: "912px"`, and `lg: "1232px"` inside `extend.screens` **overrides** Tailwind's default breakpoints (640 px, 768 px, 1024 px) globally. Any file in the codebase that already uses `sm:`, `md:`, or `lg:` responsive prefixes — `Modal.tsx`, `dialog.tsx`, `Popover.tsx`, `input.tsx`, `Badge.tsx`, `settings-layouts.tsx`, and ~15 others found — will silently shift to these new pixel values.
The affected screen ranges are:
- 640–724 px: `sm:` styles no longer apply (was 640 px, now 724 px)
- 768–912 px: `md:` styles no longer apply (was 768 px, now 912 px)
- 1024–1232 px: `lg:` styles no longer apply (was 1024 px, now 1232 px)
Those components were authored against Tailwind's standard defaults. If this consolidation is intentional, it's worth auditing all existing `sm:`, `md:`, and `lg:` usages to confirm none of them regress visually at the affected screen-width ranges.
How can I resolve this? If you propose a fix, please make it concise.
Contributor
Author
There was a problem hiding this comment.
This was intentional
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Closes https://linear.app/onyx-app/issue/ENG-3890/sidebar-breakpoints
How Has This Been Tested?
Expecting no/minimal change to large screen cases.
Additional Options
Summary by cubic
Fixes sidebar overlap on medium screens by switching to a foldable rail that stays in flow and opens as a fixed overlay with a blur backdrop on expand. Addresses Linear
ENG-3890by aligning breakpoints and centralizing fold/hide logic.Bug Fixes
Refactors
web/src/layouts/sidebar-layouts.tsx: added medium-screen branch with a spacer;Bodynow auto-hides when folded.sm724px,md912px,lg1232px;mobilemax 724;MOBILE_SIDEBAR_BREAKPOINT_PXset to 724; updated admin document-processing page tosm:*.AppSidebarrelies on layout-managed folding;AdminSidebaruses shared fold state, adds a folded “Search” action that expands and auto-focuses the input, and hides the footer when folded.Written for commit 396f7a7. Summary will update on new commits.