Skip to content

feat(app): hover pill on resize handles and a wider sidebar range - #57343

Merged
kitlangton merged 2 commits into
betafrom
resize-handles
Oct 20, 2026
Merged

kitlangton merged 2 commits into
betafrom
resize-handles

Conversation

@kitlangton

Copy link
Copy Markdown
Contributor

Why

Kit compared our resize boundaries with Claude's desktop app. Claude shows a small pill on a boundary after a short hover, and it brightens while you drag. Its panes also resize across a much wider range. Ours showed nothing on hover. At a 1280 px window with the side panel open, the chat/side divider couldn't move at all: split diffs reserve 800 px for the side panel, so the chat panel was already at its 450 px floor.

What Changes

  • One shared handle (packages/ui ResizeHandle): a 4 × 40 px pill centred on the handle. It fades in 200 ms into a hover (150 ms ease-out) in icon-muted, and brightens to icon-base while dragging. When the drag ends or the pointer leaves, it fades out over 110 ms. The hit area stays 8 px with col-resize/row-resize, and the cursor holds while dragging. It only changes opacity and colour, so nothing shifts.
  • Handles sit in the gap: the sidebar handle and the bottom-pane handle now centre on the 8 px gap, as the chat/side handle already did. The file-tree and split-pane handles stay on their border line.
  • Sidebar width: 140–520 → 120–640 px. At 120, Home still fits beside the sidebar toggle. Tab titles fade out as before, and Search/New session truncate.
  • Chat ↔ side panel: a drag can now take either side down to 320 px (chat was 450; side was 480, or 800 with split diffs). The default width stays the same until you drag: the old 450/480/800 fit still applies to a never-resized session.

Scope

Desktop web/Electron layout only. No new settings, no API change and no theme token changes (uses the existing --v2-icon-icon-muted / --v2-icon-icon-base).

Verification

  • bun typecheck (app, ui), bun test src/session/session-panel-width.test.ts with new cases for dragged widths, bun run lint:changed origin/beta.
  • tabs.spec.ts now covers the new sidebar min (120) and max (640). The labels still fit at 140.
  • Recorded against a hermetic server with the web build (fictional sessions). The clip and stills are on the board review: before | after at 1×, a 0.25× clip of the pill, and the narrowest sidebar. Measured pill timing in the 0.25× capture: it appears ≈210 ms after the hover starts, fades in over ≈150 ms and fades out over ≈100 ms.

@kitlangton
kitlangton marked this pull request as ready for review October 20, 2026 19:21
@kitlangton
kitlangton merged commit df98f1c into beta Oct 20, 2026
9 of 17 checks passed
@kitlangton
kitlangton deleted the resize-handles branch October 20, 2026 19:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant