fix(web): panel resize handles follow touch drags#33066

Problem

On a touch screen (Chrome on an Android tablet or Googlebook), dragging the resize handles between panels does not follow the finger. The terminal drawer, the right panel, the file explorer column and the sidebar rail move about 20px and then stop. The browser takes the gesture over as a pan and sends pointercancel, which ends the drag. The handles are also only 6–8px wide, so a finger that lands slightly off one misses it entirely.

Reproduced on main 23e3465 in Chromium with real touch input (CDP Input.dispatchTouchEvent, 1280×800, (pointer: coarse)). Opening the bottom and right panels and dragging each handle 80px moved it 20px and ended in pointercancel. The same drags with a mouse moved 80px.

Change

• Every panel resize handle gets touch-action: none (touch-none), so the browser never claims the touch as a pan and the drag stays with the finger until release. This covers the shared RightPanelResizeHandle (right panel and file explorer), the terminal drawer handle and the sidebar rail. Taps on the rail behave as on main (touch-action does not suppress clicks).
• On any touch-capable device (any-pointer-coarse:, so a laptop with a touch screen and a trackpad counts too), the drawer and right-panel handles widen to 16px. The drawer handle grows downward, because the drawer clips above its top edge.
• With several terminals open, only the terminal sidebar's split/new/close buttons sit above the taller drawer handle, so they keep their taps. The empty part of that header still starts a resize.
• Devices without touch keep the 6px and 8px handles. On touch-capable devices, including touch laptops used with a mouse, the top 16px of the drawer (about 12px of the terminal's first row) and 8px on each side of a separator now start a resize instead of reaching the content beneath. That band covers the 6px scrollbar of the chat timeline and of the file viewer beside a separator; the wheel and trackpad still scroll.
• The drawer's two identical handle elements (empty and populated drawer) are now one local element, so they cannot drift apart.

Scope and approval

Fixes pingdotgg/t3code#33056

Verification

• vp run check:changed passes on the branch, as does CI on the reviewed head. No new automated test: Chromium's pan takeover only happens with real touch input, which synthetic PointerEvents in vitest browser mode cannot produce, and a test that checks for the class would only restate the change.
• The any-pointer-coarse: classes compile to @media (any-pointer: coarse) with the app's Tailwind 4.3.3, after the base sizes, so they win on touch-capable devices.
• Real-app before/after recordings below cover every handle and every caller: empty, single and multi-terminal drawers (header buttons and empty header space), terminals in the right panel (no drawer handle), the outer right panel, the Files / Changes / PR Code explorer separators, the sidebar rail, a mouse-only control, and narrow layouts. In sheet layouts (980px) the outer right-panel handle is absent; the explorer separator inside the sheet still renders and gets the same change.
• Touch centre drags: before, about 20px then pointercancel; after, the full 80px to pointerup. Mouse-only contexts keep the 6 / 8 / 8 / 16px handles and full drags on both sides. Tapping the expanded rail does nothing on either side; the sidebar trigger collapses and reopens it.

Not verified: physical Android or ChromeOS devices, a touch laptop whose primary pointer is fine (Chromium's touch emulation sets both pointer and any-pointer to coarse, so this case rests on the compiled any-pointer rule), and the Electron shell (it renders the same components).

Evidence

Captured on 30ab341; the final head c8c3e16 only merges main, which touches none of the three changed files.

Before 4c36119; after 30ab341. 11/11 mandatory interaction rows recaptured; four accepted static pairs reused.

Linux x86_64; Playwright Chromium 148.0.7778.96, headless; DPR 1; font scaling 100% (UI 16px, code 13px, terminal 12px); viewport/hasTouch only; dark 1280×800 (N1: 980×800, 700×800, 390×844, then 1280×800); reduced motion; fixed browser clock 2026-11-10T12:00:00Z. Touch: pointer:coarse=true and any-pointer:coarse=true; M1 mouse: both false.

Narration is outside app pixels; N1 uses a full-height 1280×844 letterbox canvas and a wrapped external strip. Stills passed reduced motion, network/fonts idle and identical screenshots 500ms apart. S1 content completed before its recording context. Tap and drag contact start/end timestamps are logged at dispatch and calibrated to the visible marker (about 0.1s precision).

Probe summary: touch centre drags cancel after about 20px before and track 80px to pointerup after; full coordinates, hit tests, pointer targets, intermediate sizes, clamps, taps and reverse states are linked per row. Mouse targets remain 6/8/8/16px. D0 is an app-state fixture; F3 is actual PR Code.

What else changed: D0/D1/D2: drawer boundary, chat empty-state text, composer, terminal toolbar and terminal contents move/reflow with the different resulting drawer height. P1: right-panel boundary, tabs, launcher and chat/composer reflow with panel width. F1/F3: explorer boundary and labels move with width; source/diff lines wrap and subsequent rows move. F2 records both drags; its still follows the returned-width milestone. S1: sidebar background, thread rows and icons widen; chat/composer shifts and wraps. F2/M1/N1/T1 comparison milestones: zero changed pixels. T1 uses the ready single-panel baseline before the recorded two-terminal sequence. No caret exception is needed. Four reused static pairs: zero changed pixels at threshold 0. No unrelated product styling change observed.

Unverified: physical hybrid hardware H1, Android/ChromeOS hardware and Electron native shell; no mandatory interaction row missing.

Complete rebuild scripts: align-videos.mjs · bootstrap.mjs · build-index.py · capture.mjs · cleanup-servers.py · diagnose.mjs · driver.mjs · inspect-probes.py · inspect-s1.mjs · package-evidence.mjs · probes.mjs · review-images.py · review-videos.mjs · seed-app.mjs · seed-workspace.sh · start-servers.py · static.mjs · track-processes.py · upload-assets.py

AI-assisted; verified with the tests and tools listed above.