Skip to content

feat: cell-detail right-hand drawer horizontal resize (#101)#112

Merged
BorisTyshkevich merged 1 commit into
mainfrom
feat/cell-drawer-resize-101
Jul 1, 2026
Merged

feat: cell-detail right-hand drawer horizontal resize (#101)#112
BorisTyshkevich merged 1 commit into
mainfrom
feat/cell-drawer-resize-101

Conversation

@BorisTyshkevich

Copy link
Copy Markdown
Collaborator

What & why

Closes #101. Adds a drag handle to the right-hand cell-detail / rows-viewer drawer's left edge (.cd-panel, src/ui/results.js), shared by openCellDetail and openRowsViewer, so users can widen it to comfortably read long values/rows. Reuses splitters.js's drag controller (a new 'drawer' axis alongside col/sideRow/row) rather than a third bespoke resize implementation, per the issue's guidance. Width is clamped to 320px..92vw and persisted as cellDrawerPx — one shared value for both drawers.

Fixes the issue's flagged correctness catch: finishing a resize drag with the mouse released over .cd-backdrop (not .cd-panel) previously closed the drawer, since the browser's post-mouseup click targets the nearest common ancestor of the mousedown/mouseup targets, bypassing the panel's own stopPropagation. A one-shot capturing click listener installed at drag-start swallows exactly that click.

Code review (8-angle parallel pass) surfaced one additional, real gap beyond the issue's own scope: closing the drawer mid-drag (e.g. pressing Escape while the mouse button is still down, before the drag's own mouseup/click ever fires) left the drag's mousemove/mouseup/click-swallow listeners attached after the panel was removed — a later, completely unrelated mouseup would still persist a stale cellDrawerPx, and a later unrelated click would be silently swallowed. Fixed: startDrag now returns a cancel(), wired into both drawers' close(), which also reverts the width to its pre-drag value.

A broader, pre-existing pattern was found and filed separately rather than fixed here (out of scope for a resize-handle issue): .cd-backdrop's onclick:close doesn't check where the corresponding mousedown originated, so e.g. dragging a text selection past the panel edge has the same close-on-drag-release bug — see #110, deferred to the planned shared Drawer primitive (#60).

Verified live against a real ClickHouse cluster (npm run local + Playwright): drag-resize, clamp bounds, persistence across reload, no-close-after-drag, and the Escape-mid-drag cancel path all confirmed working, including the zoom-scale compensation math (this app's html{zoom} factor was non-1 in the test viewport, and the handle tracked the cursor 1:1 regardless).

Checklist

Test plan

  • npm test — 1272 tests, 100% coverage gate green
  • npm run builddist/sql.html builds
  • npm run test:e2e — 39 Playwright tests (chromium/firefox/webkit) green
  • Manual verification against a live ClickHouse cluster via npm run local + Playwright (see PR description)

🤖 Generated with Claude Code

Adds a drag handle to the cell-detail/rows-viewer drawer's left edge,
shared by openCellDetail and openRowsViewer via a new 'drawer' axis on
splitters.js's dragValue/startDrag, clamped to 320px..92vw and
persisted as cellDrawerPx. Fixes a click-through where finishing a
drag with the mouse released over the backdrop would close the
drawer (the post-mouseup click targets the nearest common ancestor of
the mousedown/mouseup targets, bypassing the panel's stopPropagation).

Code review surfaced a related gap: closing the drawer mid-drag (e.g.
Escape while the mouse button is still down) left the drag's
listeners attached after the panel was removed, so a later unrelated
mouseup could persist a stale width and a later unrelated click could
be silently swallowed. startDrag now returns a cancel() that both
drawers' close() calls first.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@BorisTyshkevich BorisTyshkevich merged commit fac4bd2 into main Jul 1, 2026
6 checks passed
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.

Cell-detail right-hand drawer: add horizontal resize

1 participant