fix(web): make the inline rail resizable via touch and stylus - #4781
Closed
btli wants to merge 11 commits into
Closed
fix(web): make the inline rail resizable via touch and stylus#4781btli wants to merge 11 commits into
btli wants to merge 11 commits into
Conversation
The 1px handle only listened for mouse events, so touch/stylus drags lost the pointer as soon as they left the handle. Pointer capture plus a 44px hit target on handleProps keep the stream without changing consumers. Signed-off-by: Bryan Li <bryan.li@gmail.com>
Signed-off-by: Bryan Li <bryan.li@gmail.com>
Signed-off-by: Bryan Li <bryan.li@gmail.com>
Signed-off-by: Bryan Li <bryan.li@gmail.com>
btli
pushed a commit
to btli/omnigent
that referenced
this pull request
Aug 14, 2026
Signed-off-by: Bryan Li <bryan.li@gmail.com>
btli
pushed a commit
to btli/omnigent
that referenced
this pull request
Aug 14, 2026
Signed-off-by: Bryan Li <bryan.li@gmail.com>
Signed-off-by: Bryan Li <bryan.li@gmail.com>
This was referenced Aug 14, 2026
Signed-off-by: Bryan Li <bryan.li@gmail.com>
Contributor
Author
|
Tribunal attestation (automated multi-engine review): CLEAN Both blocking engines (codex + claude_code) attested head |
Signed-off-by: Bryan Li <bryan.li@gmail.com>
Signed-off-by: Bryan Li <bryan.li@gmail.com>
Signed-off-by: Bryan Li <bryan.li@gmail.com>
btli
marked this pull request as draft
August 15, 2026 14:15
13 tasks
Contributor
|
Closed. If you want to pick this back up, comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of #4790
Related issue
Implements TR-6 / TR-7 / TR-9 of the touch interaction spec (the touch-interaction spec (see #4790)) for the always-visible inline rail. No standalone issue to close.
Summary
The right-rail resize handle only listened for mouse events on a 1px target, so touch and stylus drags lost the pointer as soon as they left the handle (or crossed the HTML-preview iframe).
useResizableInlinePanelfrom mouse to pointer events:onPointerDown+setPointerCapture, with move/up on the captured element.pointercancelandlostpointercapture(last applied size, no persist, listeners gone). First pointer wins until that drag ends. Unmount still drops the iframe overlay.handleProps:touch-action: noneplus 20px content-box padding each side (44px hit target on the existingw-1handle).WorkspacePanel/AppShellstill spreadhandlePropsunchanged. Width gating is untouched.ELI5
The right-rail divider still looks like a thin line. The invisible grab area around it is now finger-sized, and once you start dragging, that finger owns the resize until you lift it (or the browser cancels).
sequenceDiagram participant Finger participant Handle Finger->>Handle: pointerdown Handle->>Handle: setPointerCapture loop while captured Finger->>Handle: pointermove (even off-handle / over iframe) Handle->>Handle: update live width end alt pointerup Finger->>Handle: persist width else pointercancel / lostpointercapture Finger->>Handle: abort, keep last applied, no persist endTest Plan
npx pnpm install --frozen-lockfileat worktree root (Node 22)web/node_modules/.bin/vitest run src/hooks/useResizableInlinePanel.test.tsx— 22 passedweb/node_modules/.bin/vitest run src/shell/WorkspacePanel.test.tsx— 41 passedweb/node_modules/.bin/vitest run src/shell/AppShell.test.tsx— 102 passedweb/node_modules/.bin/tsc -b— cleanDemo
Inline seam touch-drag validated live — foldable, tablet. Adjacent transcript scroll never resizes; gutter clears the scrollbar thumb band.
Type of change
Test coverage
Coverage notes
Hook unit tests cover pointer capture,
pointercancelabort,lostpointercaptureabort, first-pointer-wins, 44px hit-target style, iframe overlay mount/unmount, and existing keyboard / reserved-width / persistence behavior. End-to-end touch demo is deferred to the consolidated validation phase.Changelog
The right rail can be resized with touch and stylus, not just a mouse.