Make concept detail panel resizable and collapsible - #10
Merged
Merged
Conversation
- Add a header toggle button (PanelRight icon) to show/hide the right-hand concept detail panel, mirroring the existing left sidebar toggle. - Add a drag handle on the detail panel's left edge to resize it horizontally (clamped between 260px and 640px), driven by a --detail-width CSS variable on the workspace grid. - Detail.jsx is unchanged; the panel's size/visibility is purely a layout concern handled in App.jsx and styles.css. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
🟡 Changes recommended
The current resize implementation has an accessibility gap (no keyboard support) and can leak pointer listeners on pointer cancel/blur scenarios.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR adds a collapsible and horizontally resizable right-hand concept detail panel by introducing new layout state in App.jsx and driving the workspace grid’s detail column width via a CSS custom property in styles.css.
Changes:
- Added
detailOpen/detailWidthstate and a header toggle button (PanelRight) to show/hide the detail panel. - Added a pointer-driven resize handle to adjust the detail panel width with min/max clamping.
- Updated workspace layout CSS to use
--detail-widthand to collapse the grid to fewer columns when the detail panel is closed.
File summaries
| File | Description |
|---|---|
| src/App.jsx | Adds detail panel toggle + resize handle and wires width/visibility into workspace layout state. |
| src/styles.css | Updates workspace grid columns to use --detail-width, adds detail-pane/resize-handle styling, and handles collapsed layout. |
Review details
- Files reviewed: 2/2 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+89
to
+106
| function handleDetailResizeStart(event) { | ||
| event.preventDefault(); | ||
| const startX = event.clientX; | ||
| const startWidth = detailWidth; | ||
|
|
||
| function handleMove(moveEvent) { | ||
| const nextWidth = startWidth + (startX - moveEvent.clientX); | ||
| setDetailWidth(Math.min(MAX_DETAIL_WIDTH, Math.max(MIN_DETAIL_WIDTH, nextWidth))); | ||
| } | ||
|
|
||
| function handleUp() { | ||
| document.removeEventListener("pointermove", handleMove); | ||
| document.removeEventListener("pointerup", handleUp); | ||
| } | ||
|
|
||
| document.addEventListener("pointermove", handleMove); | ||
| document.addEventListener("pointerup", handleUp); | ||
| } |
Comment on lines
+219
to
+225
| <div | ||
| className="detail-resize-handle" | ||
| role="separator" | ||
| aria-orientation="vertical" | ||
| aria-label="Resize concept detail panel" | ||
| onPointerDown={handleDetailResizeStart} | ||
| /> |
Comment on lines
+495
to
+500
| .detail-pane { | ||
| position: relative; | ||
| min-width: 0; | ||
| min-height: 0; | ||
| overflow: hidden; | ||
| } |
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
Users can now resize (horizontally) and collapse the right-hand concept detail panel.
PanelRighticon) to show/hide the detail panel, mirroring the existing left sidebar toggle button/pattern.--detail-widthCSS variable on the.workspacegrid.Detail.jsxis unchanged — the panel's size/visibility is purely a layout concern handled inApp.jsx(state + handlers) andstyles.css(grid columns + resize handle styling).sidebarOpenitself isn't persisted, to keep the diff minimal.Testing
npx vitest run— 22/22 tests passing (no test changes needed).npm run build— builds successfully.Made with Cursor