Make the session list and file explorer split resizable - #778
Conversation
The sidebar splits its height evenly between the session list and the file explorer, and that split is fixed. Browsing a deep tree leaves half the sidebar on sessions; scanning a long session list leaves half of it on a few files. The sidebar and file panel widths are both resizable, so this was the only panel boundary that could not be adjusted. Drive the boundary with the existing useResizablePanel hook so it inherits drag, Home/End, Enter to reset, shift steps, pointer capture, blur cancellation, and reclamping on window resize. The hook now accepts "up" and "down" growth directions, reading clientY, using row-resize, and reporting a horizontal separator; existing horizontal callers are unchanged. The height is stored under pi-explorer-height and applied through a CSS variable on the sidebar, because the explorer element only mounts once a project is open.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![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: 637bf3d17f
ℹ️ 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".
| () => Math.max( | ||
| EXPLORER_MIN_HEIGHT, | ||
| (sidebarBodyRef.current?.getBoundingClientRect().height ?? 0) - SESSION_LIST_MIN_HEIGHT, | ||
| ), |
There was a problem hiding this comment.
When the user drags to the maximum, presses End, or restores a large saved height, this limit subtracts only the session-list minimum from the entire sidebar height. The fixed header above the list still consumes space, so the header, 80px list, and explorer necessarily exceed the sidebar; because the root has overflow: hidden, the bottom of the explorer is clipped and some file-tree content cannot be scrolled into view. Measure the space shared specifically by the session list and explorer, or also subtract the fixed header's current height.
Useful? React with 👍 / 👎.
…he list The ceiling subtracted only the list minimum from the whole sidebar, but the header above the list keeps its height, so at the maximum the header, list, and explorer exceeded the sidebar and the bottom of the file tree was clipped behind overflow: hidden. Measure the list and explorer themselves, so the maximum is the space the two of them actually share. With a 129px header the explorer now stops at 826px instead of 955px and nothing is clipped.
|
Addressed in 31e5319. The ceiling now measures the session list and the explorer themselves rather than the whole sidebar, so the fixed header above the list is no longer counted as resizable space. Verified in a browser: with a 129px header the explorer stops at 826px (was 955px) and the bottom of the file tree is no longer clipped. |
1 participant
Problem
The sidebar splits its height evenly between the session list and the file explorer whenever the explorer is open. The split cannot be changed, so the balance is wrong for most of the work in the sidebar: browsing a deep file tree leaves half the sidebar showing sessions, and scanning a long session list leaves half of it showing a handful of files.
The sidebar width and the file panel width are both resizable, so this is the one panel boundary that cannot be adjusted.
Change
The boundary between the session list and the explorer becomes a draggable separator, using the same
useResizablePanelhook that already drives the sidebar and file panel. That means the same drag,Home/End,Enterto reset, shift-step, pointer capture, blur cancellation, and width reclamping on window resize, plus persistence underpi-explorer-height.To reuse the hook,
growthDirectionacceptsupanddownin addition toleftandright. The vertical axis readsclientY, usesrow-resize, reportsaria-orientation="horizontal"for the separator, and drives the arrow keys of that axis. Horizontal callers are unchanged.The explorer keeps its own height and the session list takes the remaining space, with both sides floored so neither collapses. The height is applied through a CSS variable on the sidebar rather than the explorer element, because the explorer only mounts once a project is open.
Tests
components/SessionSidebar.explorer-split.test.mjs— the sidebar drives the shared resizer, and the hook handles both axes without changing horizontal behaviour.npm test(952),tsc --noEmit,eslint, andnext buildpass.Enterresets to the default, arrow keys step it, and the existing sidebar width resizer still works (260 → 330).