The file explorer beside an open file has a fixed width, so long paths remain truncated even when the outer panel is widened.
Reuse the existing resize handle and drag hook for a saved explorer width, with keyboard resizing and container-aware bounds. Keep the existing show/hide controls and full-width explorer-only layout. Measure through a ref callback, removing the original effect and lint suppression. Web and desktop share this component; no server, provider, contract, or mobile changes are needed.
Addresses issue #11559 and follows @juliusmarminge's suggested fix: add an inner handle, persist width, and clamp to the current panel. Scope is limited to the existing file explorer. The 256px default and new resizing interaction remain subject to Maria's review.
vp run check:changed (format, lint, both knip checks, affected typechecks, 33 existing file-preview tests).Replaces #25242, with thanks to @07rjain for the original implementation.
Built with GPT-6.1-Sol in the Codex harness on T3 Code.
Added 1 commit
Verdict: Needs Human Approval
Macroscope's review found this PR requires human approval — This PR adds persisted drag and keyboard resizing for the file explorer and changes its default width from the existing 22rem-based layout to 256px. The product-default change and new interactive behavior warrant human review.
You can add or adjust custom eligibility rules. Learn more.
No actionable comments were generated in the recent review.
75db485a-606e-4d67-8e56-220b0d776656Reviewing files that changed from the base of the PR and between 5127de8c29ede39fc567337cebc4726fbaa16b63 and 0a87f746e41248531bc523e6dec2c710ee231488.
apps/web/src/components/files/FileExplorerPane.tsxapps/web/src/components/files/FilePreviewPanel.tsxapps/web/src/components/preview/RightPanelResizeHandle.tsxapps/web/src/hooks/useResizableWidth.tsIncluded review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 2 remain after this review.
The file explorer pane can resize when a preview is active. It uses persisted, bounded widths and supports pointer and keyboard input. The shared resize hook exposes direct width updates, and the resize handle forwards accessibility and keyboard properties.
Changes: File Explorer Resizing
| Layer / File(s) | Summary |
|---|---|
Shared resize APIs apps/web/src/hooks/useResizableWidth.ts, apps/web/src/components/preview/RightPanelResizeHandle.tsx | The hook adds a clamped setWidth method and uses shared logic for state updates and persistence. The resize handle forwards selected div properties and an optional accessibility label. Its focus-visible indicator uses the primary color at 60% opacity. |
Explorer pane and preview integration apps/web/src/components/files/FileExplorerPane.tsx, apps/web/src/components/files/FilePreviewPanel.tsx | FileExplorerPane adds persisted sizing, width bounds, and pointer and keyboard resizing. FilePreviewPanel uses the pane and enables resizing when previewPath is truthy. |
Priority: External image Low
Estimated code review effort: 3 (Moderate) | ~20 minutes
Change: Feature
| 1 | sequenceDiagram |
| 2 | participant FilePreviewPanel |
| 3 | participant FileExplorerPane |
| 4 | participant useResizableWidth |
| 5 | participant RightPanelResizeHandle |
| 6 | FilePreviewPanel->>FileExplorerPane: Render with resizable based on previewPath |
| 7 | FileExplorerPane->>useResizableWidth: Read and update persisted width |
| 8 | FileExplorerPane->>RightPanelResizeHandle: Render resize handle with handlers |
| 9 | RightPanelResizeHandle->>FileExplorerPane: Forward pointer or keyboard input |
| 10 | FileExplorerPane->>useResizableWidth: Commit clamped width |
Possibly related PRs
Suggested labels: takeover, vouch:unvouched, size:M
Suggested reviewers: juliusmarminge
0a87fThe explorer resizing change is mergeable subject to normal checks; no concrete blocking issue has been established.
| Check name | Status | Explanation |
|---|---|---|
| Title check | Passed | The title clearly and concisely describes the primary change: adding file explorer resizing in the web application. |
| Linked Issues check | Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | Passed | Check skipped because no linked issues were found for this pull request. |
| Description check | Passed | The description follows the template's main sections (Problem, Change, Scope and approval, Verification) and is detailed. It explains the problem (fixed-width file explorer truncates long paths), the … |
Explanation
The description follows the template's main sections (Problem, Change, Scope and approval, Verification) and is detailed. It explains the problem (fixed-width file explorer truncates long paths), the change (saved width, keyboard resizing, container-aware bounds, ref callback replacing an effect), and the scope (linked issue #11559 and a maintainer-suggested fix). Verification lists the commands run, Chrome checks, and what was not verified, and includes before/after screenshots. The template's Scope section asks for a maintainer approval comment. The author links a suggested-fix comment from a maintainer, but the description does not clearly show explicit approval of this direction. The description also says the 256px default and interaction remain subject to a named reviewer's review, which signals that approval is still open. The template's title guidance is a conventional commit title, and the PR title is not in the provided context. The template's trailing agent-model line is present.
Comment @coderabbitai help to get the list of available commands.
For CodeRabbit’s description warning, the scope reference from the original PR is issue #11559 and Julius’s suggested fix: add a left-edge explorer handle, persist its width, and clamp it against sensible bounds and the current panel width. This replacement remains scoped to that explorer; diff/PR trees are outside the change.
These references can be carried into the replacement description’s “Scope and approval” section. The suggested implementation is prior maintainer guidance; it does not replace the human approval requested by Macroscope for this PR.
Note
Written by gpt-6.1-sol on behalf of Maria
verified as-is at 0a87f746e41248531bc523e6dec2c710ee231488 on this linux boat vm. no code changes or pushes.
vp i on github/main (07f7f97609) in a separate worktree and on the exact pr head. ran one background dev server at a time, with isolated state and system chrome driven by the repository's playwright.gpt-6.1-sol turns created the two files on main (17s), then read and verified them on the pr (19s). opened the provider's file link into the actual file preview.before on main: fixed 352px explorer with truncated filename
after on pr: explorer widened to 496px with the full filename visible
real app: drag, hide/show, outer-panel bounds, keyboard resizing and file navigation
native desktop packaging or macos/windows behavior, native ios/android, remote/relay/tunnel connections, other providers, and assistive-technology narration were not exercised on this linux web-client pass. web and desktop share the changed component; mobile is separate.
no new checks were run because no source changes were needed. github currently reports 25 successful, 15 skipped, 1 neutral and 1 cancelled context (Native fingerprint diff), with no failing or pending contexts. cafe reports 34/34 successful checks. these ci results are separate from the runtime proof above.