fix: keyboard shortcuts drawer full-height background#8
Conversation
Override base DrawerContent top-direction constraints so the shortcuts panel fills the entire screen instead of stopping at 80vh. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Fixes the Cmd+/ Keyboard Shortcuts top drawer so its background and layout can extend to full viewport height, and the shortcuts grid can scroll within the remaining space.
Changes:
- Overrides Vaul top-drawer constraints (
max-h-[80vh],mb-24, rounding/border) for the Keyboard Shortcuts drawer content. - Adjusts the inner layout to a flex-based column with a scrollable grid region between header and footer.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <DrawerContent className="border-border/80 bg-card/95 shadow-2xl supports-backdrop-filter:backdrop-blur-xl data-[vaul-drawer-direction=top]:max-h-dvh data-[vaul-drawer-direction=top]:mb-0 data-[vaul-drawer-direction=top]:rounded-b-none data-[vaul-drawer-direction=top]:border-b-0"> | ||
| <div className="mx-auto flex h-full w-full max-w-6xl flex-col"> |
There was a problem hiding this comment.
DrawerContent still has h-auto (see src/components/ui/drawer.tsx), so only changing max-h-* doesn’t guarantee the top drawer actually becomes full-height. In that case, the inner wrapper’s h-full won’t resolve to a real height, and the flex-1 overflow-y-auto grid may never become the scroll container (it will just grow with content). Consider giving the top drawer a definite height/position (e.g., set data-[vaul-drawer-direction=top]:bottom-0 or data-[...]:h-dvh/min-h-dvh and overflow-hidden), and make the inner wrapper a flex item (flex-1 min-h-0) instead of relying on h-full.
| <DrawerContent className="border-border/80 bg-card/95 shadow-2xl supports-backdrop-filter:backdrop-blur-xl data-[vaul-drawer-direction=top]:max-h-dvh data-[vaul-drawer-direction=top]:mb-0 data-[vaul-drawer-direction=top]:rounded-b-none data-[vaul-drawer-direction=top]:border-b-0"> | |
| <div className="mx-auto flex h-full w-full max-w-6xl flex-col"> | |
| <DrawerContent className="border-border/80 bg-card/95 shadow-2xl supports-backdrop-filter:backdrop-blur-xl data-[vaul-drawer-direction=top]:h-dvh data-[vaul-drawer-direction=top]:min-h-dvh data-[vaul-drawer-direction=top]:max-h-dvh data-[vaul-drawer-direction=top]:overflow-hidden data-[vaul-drawer-direction=top]:mb-0 data-[vaul-drawer-direction=top]:rounded-b-none data-[vaul-drawer-direction=top]:border-b-0"> | |
| <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col min-h-0"> |
Summary
Cmd+/) 패널 배경이 화면 전체 높이를 채우지 않던 문제 수정DrawerContent의max-h-[80vh],mb-24제약을data-[vaul-drawer-direction=top]:오버라이드로 해제Test plan
Cmd+/로 Drawer를 열어 패널 배경이 전체 화면을 채우는지 확인🤖 Generated with Claude Code