fix(desktop): make narrow panes and narrow windows readable

KI
6h ago
+336-38

Links

Summary

  • Fixes overlapping text in the Changes pane header when the pane is narrow (the reported bug), then sweeps every v2 pane at narrow widths and fixes four more breakages.
  • Header pieces now drop in a set order by pane width instead of overflowing onto each other.
  • In windows too narrow for the sidebar, center and right area together (~800px), the app sidebar folds to its rail so the right area no longer covers the main pane.

Why / Context

The right pane area sits at ~261px by default, and the main area gets squeezed in small windows. In those widths several panes broke: text painted over other text, the file tree shrank to ~90px, the URL field to a few letters, and the active tab's title was cut off on the left.

How It Works

  • Changes header (DiffPaneScope, ChangesScopeControl, CommitFilterDropdown): the commit chip and "vs base" clip their own content. Container queries on pane-header hide "vs base" below 420px and the totals below 360px; "Commits" truncates and the count stays.
  • Tab bar (packages/panes TabBar, scrollLeftToRevealTab): a tab wider than the strip aligns its left edge, so the title shows. The reveal also re-runs when the strip resizes. On reload it ran while the right area was still wide and never ran again.
  • Files / File panes (FileViewLayout): one panel group at every width, so the editor never remounts. Below 420px a Files pane shows the tree full width; a file pane hides the tree by default; shown by hand, it stays beside the file across files, panes and resizes for the session (narrowVisible, a session setting next to the existing wide-pane visible), and the split can be dragged as far as tree-only. useElementWidth moves up to usePaneRegistry/hooks since two panes use it now.
  • Browser toolbar: reload hides below a 300px toolbar (the existing, unused @container/browser-toolbar); back and forward always stay. ⌘R and Hard reload in the menu cover reload.
  • Page header: Share is icon-only below a 360px pane, keeping its aria-label and tooltip. PageShareButton takes a labelClassName; the desktop pane header passes the container query.
  • App sidebar in narrow windows (WorkspaceSidebarPanel, workspace-sidebar-state): folds to the 52px rail when the window is narrower than the expanded sidebar + 260 + 262 (802px at the default 280px), and unfolds when it widens again. Same rule as the Codex app (checked over CDP): once the user toggles or resizes the sidebar it stays where they put it for the rest of the session; a relaunch turns auto-fold back on. autoCollapsed is persisted in the existing workspace-sidebar-store key so a fold made by the app is undone on a wide relaunch.

Manual QA Checklist

Done over CDP on this branch's dev app, with the viewport set by Emulation.setDeviceMetricsOverride and panes opened through the real "+" menus:

  • Changes at 261 / 367 / 920px: no overlap; full header at 920px unchanged
  • Files at 261px shows the full tree; opening a file shows the file with breadcrumb, Open in and the tree toggle; the toggle shows the tree beside the file; it stays open after picking another file, widening and narrowing again; hiding it returns to the file alone (filmed, see the page)
  • Editor DOM node is the same across toggles and across 420px (right area expanded and restored), so undo history and cursor survive
  • Browser at 261px: back, forward, URL readable, reload hidden; at 367px and 920px all controls back
  • Tab strip: active tab title readable after adding a tab and after a full reload
  • Page header at 261px: title gets room, Share is icon-only
  • Terminal and Pages list at 261px: already fine, unchanged
  • Window 1200 → 760 → 1200px: sidebar 280 → rail → 280; at 760px the main pane shows in full with its close button
  • After a manual expand at 760px: stays open through 1200 → 760; after a manual collapse: stays collapsed at 1200
  • Not reachable in this dev setup: Chat, DevTools (disabled on a blank page), Pull request, Comment, Review, Changes list, Mobile

Testing

  • bun test in packages/panes: 144 pass. The new scrollLeftToRevealTab test fails without the fix.
  • bun test on the touched desktop folders (DiffPane, FileViewLayout, BrowserPane, useChangesTab): 108 pass
  • bun test on WorkspaceSidebarPanel + stores: all pass; the three new auto-collapse tests fail with the hook disabled. Persisted-key registry test passes.
  • bunx biome check on changed files: clean
  • bun run typecheck: panes and ui clean. Desktop shows only 10 TS1149 file-name-casing errors, caused by this worktree being reachable as both Superset and superset on disk; none in changed files.
  • No user-facing strings changed, so check:i18n was not run.

Known Limitations

  • At the 540px window minimum, even the rail (52 + 260 + 262 = 574px) does not quite fit with the right area open, so 540–573px windows still overlap by up to 34px.

Summary by CodeRabbit

  • New Features

    • File views adapt to narrow panes, with a floating toggle for the file tree.
    • Workspace sidebars automatically fold in narrow windows and expand when space allows, while respecting manual changes.
    • Browser reload controls, diff controls, and share-button text adapt to available space.
    • Active tabs reposition when the tab bar is resized.

  • Bug Fixes

    • Improved scrolling for tabs wider than the visible area.
    • Workspace controls clip content that exceeds available space.