Skip to content

fix(web): keep diff options reachable in narrow panels - #3

Open
ssj9685 wants to merge 1 commit into
mainfrom
fix/pr-panel-overflow
Open

ssj9685 wants to merge 1 commit into
mainfrom
fix/pr-panel-overflow

Conversation

@ssj9685

@ssj9685 ssj9685 commented Nov 8, 2026

Copy link
Copy Markdown
Owner

In a small window, the Changes toolbar keeps its view controls in a non-shrinking row. At a 320px viewport the panel is 281px wide but its contents occupy 311px, pushing the file-tree button offscreen. The PR Code toolbar already has a compact menu, but leaves collapse, test-file filtering and the file tree outside it.

Use one shared Diff options menu below 36rem of toolbar width. It contains line wrapping, whitespace filtering, stacked/split layout, collapse/expand, test-file filtering and the file tree, with the existing conditional availability and state handlers. Wider toolbars retain their inline controls; resizing preserves the selected settings. Named CSS container queries follow the panel width without a resize observer or new persisted state.

Prior-work check: searched upstream and fork issues, PRs and discussions for diff toolbar/options, clipping, overflow and narrow windows. No direct matching fix found. Upstream #32603 changes PR section-tab labels, #32593 changes pane-tab scrolling (both target redesign branches), and #31115 fixes the thread-details PR row. These are separate surfaces. This change extends the existing compact PR diff-menu approach to all view options and the Changes panel.

Validation:

  • vp run check:changed passed format, lint, both knip passes, affected web/scripts typechecks, 8 existing tests, and React Compiler checks. The final restored code matched the passing check cache. Commit hooks passed.
  • Isolated real web app: reproduced 311px content in a 281px Changes toolbar; after the change both measure 281px. Checked 320px and 390px windows, a 900px window with a 359px PR panel, and a 1500px window restoring inline controls.
  • PR Code: exercised wrapping, whitespace filtering, split layout, hide/show test files, file tree and collapse/expand. Settings remain selected when the panel widens. Changes panel: exercised wrapping and keyboard End/Enter to toggle the file tree; Escape returns focus to Diff options.
  • Pure visual overflow fix: before/after captures, no new tests duplicating layout or callback wiring. Built-in Browser snapshots timed out twice; verification used local Playwright Chromium.

Web and desktop share these components; native mobile uses its own UI and is unchanged. No entry-point, provider, RPC, permission, server or remote-origin changes. Electron shell, native mobile and real relay/tunnel sessions were not run. CI and reviews are separate from the local checks. No live T3 data was modified.

Changes panel, 320px window: before After
File tree extends beyond the right edge Toolbar fits within the panel

All available view options remain reachable

PR Code, 900px window: before After
Compact PR toolbar retains three additional buttons PR toolbar uses one options menu

PR menu includes collapse, test files and file tree

Captures use the same isolated dev environment; Changes shows the working-tree patch, so its diff totals vary while swapping baseline/final renderer files. Screenshot assets are hosted in a non-latest evidence prerelease and are not committed to the source tree.

Model/harness: gpt-6-astra, Codex in T3 Code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant