fix(desktop): keep modal dialogs out of the window drag region - #2210
Merged
Conversation
The titlebar is the app's only `-webkit-app-region: drag` surface, and Chromium hit-tests drag regions from element rects without ever seeing the top layer. A `showModal()` dialog therefore paints over the titlebar while its controls inside that rect are still swallowed by the window manager. The lightbox close button sits in the top-right corner and was only half clickable for exactly this reason: the part of it overlapping a `no-drag` titlebar cluster took clicks, the rest reached the OS as a window drag. Subtract every modal dialog's own rect from the drag surface instead of patching one button — a modal owns what it covers and the titlebar beneath it is already inert. The attachment E2E now asserts the overlap is real and that the open lightbox computes `no-drag`.
Astro-Han
marked this pull request as ready for review
August 5, 2026 06:54
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
1 participant
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.
Summary
Clicking the lightbox close button only worked on its left half: the button sits in the window's top-right corner, inside
.maka-window-titlebar, the app's only-webkit-app-region: dragsurface. Chromium builds drag regions from element rects and that pass never sees the top layer, so ashowModal()dialog paints over the titlebar while its controls inside the titlebar rect still reach the OS as window drags. The half that did respond was the part overlapping ano-dragtitlebar cluster's rect.The fix subtracts every modal dialog's own rect from the drag surface (
dialog:modal { -webkit-app-region: no-drag }) rather than patching one third-party button: a modal owns everything it covers, and the titlebar beneath it is alreadyinert. This also covers AstryxDialog, which uses the sameshowModal()path.Verification
apps/desktopPlaywright suite: 65 passed. The attachment journey now asserts both halves of the contract — the open lightbox really overlaps the titlebar rect (so the check guards something) and it computes-webkit-app-region: no-drag. Without the CSS rule that assertion fails withnone.npm run lint,npm run format:check: clean.