Repository navigation
Add a full-width toggle to the file panel - #790
Conversation
Let readers temporarily expand the mounted file viewer across the app without changing the saved split width or reloading interactive previews. Restore the split with the same button, return to it after hiding the panel, and omit the redundant control on mobile where the panel is already full width.
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: 961ae3ca34
ℹ️ 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".
| <button | ||
| type="button" | ||
| className="file-panel-expand-button" | ||
| onClick={() => setRightPanelExpanded((expanded) => !expanded)} |
There was a problem hiding this comment.
When the System, Tools, Session, Agents, or Branches flyout is open, this handler expands the file panel without clearing activeTopPanel. Those flyouts remain rendered as fixed elements with zIndex: 500 at components/AppShell.tsx:2142-2150, above the full-width panel's z-index: 250; meanwhile their parent is made inert. The result is a stale, visibly overlaid but noninteractive flyout obscuring the file viewer until full-width mode is exited. Clear the active flyout when expanding, or otherwise ensure it cannot render above the expanded panel.
Useful? React with 👍 / 👎.
agegr
left a comment
agegr
left a comment
There was a problem hiding this comment.
Compact and practical: one state flag, a CSS class that overlays the already-mounted panel, and inert on the covered regions so focus cannot land behind it. Saved widths untouched, mobile excluded. Merges cleanly onto current main; tsc, eslint, and the AppShell tests pass. Approving.
Full-width mode marks the chat column inert, so an already-open session or agents dropdown stayed painted above the viewer with no way to close it. Co-authored-by: Cursor <cursoragent@cursor.com>
* Add a full-width toggle to the file panel Let readers temporarily expand the mounted file viewer across the app without changing the saved split width or reloading interactive previews. Restore the split with the same button, return to it after hiding the panel, and omit the redundant control on mobile where the panel is already full width. * fix: dismiss top-bar menus when expanding the file panel Full-width mode marks the chat column inert, so an already-open session or agents dropdown stayed painted above the viewer with no way to close it. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: wayne.luo <wayne.luo@bybit.com> Co-authored-by: Alex Yang <agegcn@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com> (cherry picked from commit ffb2daf)
2 participants
Problem
The file panel is useful beside the chat, but its split width is restrictive when reading wide code, tables, documents, or interactive HTML previews. Dragging the separator helps only up to the layout's maximum width, and hiding the rest of the app manually would lose the convenient split layout.
Change
Add an expand/restore button next to the existing hide-panel button.
FileViewerstay mounted, so interactive HTML state, file-viewer state, and scroll position are not reset by the layout switch.inertwhile covered.The implementation is frontend-only and applies to the whole file panel rather than any one file type.
Tests
npm test: 973 passed.git diff --check, and production build passed.