Convert rule drawer to responsive right-side panel#2
Merged
Conversation
Replace the full-height bottom drawer with a docked right-side panel that coexists with the sidebar and content as a three-lane layout. - Vaul direction="right", non-modal (modal=false + noBodyStyles) so the page stays interactive and cards re-target the panel without a body-position lock - Content swap on the keyed wrapper animates in with a staggered blur/rise - Content lane reserves the panel footprint via a viewport-coupled clamp so it shifts only as much as needed; sidebar clearance held via a --sidebar-open flag to prevent the lane sliding under the sidebar at 1366-1680px widths - Drawer renders full-screen below xl (1280px) so tablets avoid a cramped three-column squeeze; docked side panel at xl+ - Lane left-shift formula inverted to shrink with width (tight gutter on narrow screens, natural centering on wide) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 95b3023f4e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Pull request overview
This PR updates the rule detail “drawer” interaction to use a responsive right-side panel layout on desktop (xl+) while keeping a full-screen experience on smaller viewports, and adjusts layout CSS variables so the main content lane reserves space appropriately alongside the sidebar and panel.
Changes:
- Convert the rule drawer to a right-side Vaul panel (non-modal) with updated content layout and animation hooks.
- Add layout coordination between sidebar open state and content lane padding via CSS variables and a
data-drawer-openattribute. - Introduce global CSS for responsive lane reservation and staggered panel-content animations.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/layout/sidebar.tsx | Sets --sidebar-open and updates root CSS variables so the content lane can reserve sidebar clearance correctly. |
| src/components/features/rules/rule-drawer.tsx | Switches Vaul drawer to a right-side panel and adjusts internal structure for the new layout/animation. |
| src/app/page.tsx | Adds data-drawer-open attribute to enable CSS-driven lane reservation when the drawer is open. |
| src/app/globals.css | Adds responsive padding/reservation logic for the three-lane layout and defines stagger animation styles. |
| .claude/launch.json | Adds a dev launch configuration file (not directly related to the UI/layout change). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
On md–<xl widths the drawer renders full-screen but sat at z-[70], below the desktop sidebar's z-[80] container, leaving the sidebar visible and clickable on top. Bump the drawer to z-[90] so full-screen mode fully covers it. Safe at xl+ where the docked panel and sidebar don't overlap. Addresses Codex review on PR #2. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Stagger animation: target header/section/aside by tag+class instead of :nth-child, which mismatched because the sr-only <Drawer.Description> is the first child of .rule-drawer-content. Delays now resolve to 0/80/160ms. - Remove .claude/launch.json from the PR (local preview tooling, unrelated to this change) and gitignore .claude/. Addresses Codex/Copilot review on PR #2. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
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.
Summary
Replaces the full-height bottom drawer with a docked right-side panel that coexists with the sidebar and content as a three-lane layout.
direction="right", non-modal (modal=false+noBodyStyles) so the page stays interactive and cards re-target the panel without a body-position lockclamp()so it shifts only as much as needed; sidebar clearance held via a--sidebar-openflag to prevent the lane sliding under the sidebar at 1366–1680px widthsxl(1280px) so tablets avoid a cramped three-column squeeze; docked side panel atxl+Verification
Measured clearance via DOM inspection across widths (both panels open):
No overlap at any width, no console errors, typecheck clean.
🤖 Generated with Claude Code