fix: align BottomDrawer breakpoint with @bp3 (1200px)#577
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Aligns responsive behavior around the BottomDrawer + desktop widget to use the design system @bp3 breakpoint (1200px), removing the non-interactive “dead zone” window.
Changes:
- Updated BottomDrawer open condition to use
< 1200 - Updated desktop widget rendering condition to use
> 1200 - Updated body scroll lock/reset and input autofocus logic to use
1200
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
layouts/main.tsx |
Updates scroll lock/reset breakpoint to 1200px |
layouts/account.tsx |
Updates desktop widget rendering breakpoint to 1200px |
components/DelegatingWidget/Input.tsx |
Updates autofocus breakpoint to 1200px |
components/BottomDrawer/index.tsx |
Updates drawer open condition breakpoint to 1200px |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
layouts/account.tsx
Outdated
| </Flex> | ||
| {(isOrchestrator || isMyDelegate || isDelegatingAndIsMyAccountView) && | ||
| (width > 1020 ? ( | ||
| (width > 1200 ? ( |
There was a problem hiding this comment.
Using width > 1200 creates a 1px gap at exactly 1200 where the desktop widget will not render (since 1200 > 1200 is false) while the drawer is also closed (width < 1200 is false). This reintroduces a dead zone at exactly 1200px. Consider switching desktop conditions to width >= 1200 (and keep the drawer as < 1200) so coverage is continuous.
| (width > 1200 ? ( | |
| (width >= 1200 ? ( |
layouts/main.tsx
Outdated
| if (width > 1200) { | ||
| document.body.removeAttribute("style"); | ||
| } | ||
|
|
||
| if (width < 1020 && drawerOpen) { | ||
| if (width < 1200 && drawerOpen) { | ||
| document.body.style.overflow = "hidden"; | ||
| } |
There was a problem hiding this comment.
At exactly width === 1200, the removeAttribute branch won’t run. If the user had overflow: hidden applied on mobile and then resizes to exactly 1200px, the page can remain scroll-locked. To avoid this, use width >= 1200 for the style reset (and keep the lock for < 1200).
rickstaa
force-pushed
the
fix/bottom-drawer-breakpoint-alignment
branch
from
78f1615 to
a04fb7e
Compare
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
The hardcoded 1020px breakpoint for the BottomDrawer was misaligned with the design system's @BP3 (1200px) used for showing/hiding mobile action buttons. This created a dead zone at 1020-1199px where buttons were visible but the drawer wouldn't open on click. Also uses >= for desktop conditions so exactly 1200px is covered (matching CSS min-width: 1200px). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
rickstaa
force-pushed
the
fix/bottom-drawer-breakpoint-alignment
branch
from
a04fb7e to
af219ef
Compare
Summary
@bp3(1200px)Closes #578
Changed files
components/BottomDrawer/index.tsxwidth < 1020→width < 1200layouts/account.tsxwidth > 1020→width > 1200layouts/main.tsx1020→1200components/DelegatingWidget/Input.tsxwidth > 1020→width > 1200Test plan
🤖 Generated with Claude Code