fix: keep the widget action menu off the drag handle (#44) #45

2026-07-28T20:09:00Z

claude-bot commented

2026-07-28 20:09:00 +00:00

Closes #44

Cause

The corner controls of a GridStackItem (grip, close button, action menu) are laid out in 32px slots by styles.css. The action menu's button was left at its natural size — a vaadin-menu-bar-button measures 64px, twice its slot. Since the menu is appended after the grip and both are z-index: 1, it painted over the grip and covered it completely, swallowing every pointer event meant for it. Result: widgets could not be dragged at all.

Measured in the browser before the fix (offsets from the item's right edge):

control	right	width
close button	16px	28px
action menu	48px	64px → covers 48–112px
drag handle	80px	28px → 80–108px, fully covered

Fix

Size the menu's button like the other corner controls (28px, no padding), so the existing slot math holds. top goes back to 14px with it — the 11px was compensating for the taller button.

Test

WidgetActionMenuPlaywrightTest#draggingTheGrip_movesTheWidget: asserts elementFromPoint at the grip's centre actually hits the grip, then drags the widget by it and checks it changed slot. Red before the fix (expected: <dialect-drag-handle> but was: <dialect-action-menu>), green after. The existing test only covered the opposite direction — that dragging the menu button moves nothing.

./mvnw test — 68 tests, 0 failures.

🤖 Generated with Claude Code

https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69

Closes #44 ## Cause The corner controls of a `GridStackItem` (grip, close button, action menu) are laid out in 32px slots by `styles.css`. The action menu's button was left at its natural size — a `vaadin-menu-bar-button` measures **64px**, twice its slot. Since the menu is appended after the grip and both are `z-index: 1`, it painted over the grip and covered it completely, swallowing every pointer event meant for it. Result: widgets could not be dragged at all. Measured in the browser before the fix (offsets from the item's right edge): | control | right | width | |---|---|---| | close button | 16px | 28px | | action menu | 48px | **64px** → covers 48–112px | | drag handle | 80px | 28px → 80–108px, fully covered | ## Fix Size the menu's button like the other corner controls (28px, no padding), so the existing slot math holds. `top` goes back to 14px with it — the 11px was compensating for the taller button. ## Test `WidgetActionMenuPlaywrightTest#draggingTheGrip_movesTheWidget`: asserts `elementFromPoint` at the grip's centre actually hits the grip, then drags the widget by it and checks it changed slot. Red before the fix (`expected: <dialect-drag-handle> but was: <dialect-action-menu>`), green after. The existing test only covered the opposite direction — that dragging the menu button moves nothing. `./mvnw test` — 68 tests, 0 failures. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69

claude-bot added 1 commit 2026-07-28 20:09:01 +00:00

fix: keep the widget action menu off the drag handle (#44 )

CI / build-and-test (pull_request) Successful in 2m24s

Details

4e48e31011

The menu's button is one of the item's corner controls, but it was left at
its own size: a menu-bar button measures 64px, twice the 32px slot the
corner offsets in styles.css assume. Painted after the grip and overlapping
it completely, it took every pointer event meant for the grip — widgets
could not be dragged at all.

Sized to 28px like the grip and the close button, so the slot math holds.
The top offset goes back to 14px with it, the 11px having compensated for
the taller button.

Covered by a Playwright test that checks the grip is the element hit at its
own centre and then drags the widget by it; the existing test only proved
the opposite direction, that dragging the menu button moves nothing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69

pitfriedrich merged commit a7f79e64df into main

2026-07-28 20:13:43 +00:00

pitfriedrich deleted branch ai/issue-44-menu-overlays-drag-handle

2026-07-28 20:13:43 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pitfriedrich/chart-app#45