fix(desktop): keep modal dialogs out of the window drag region by Astro-Han · Pull Request #2210 · apache/maka

Astro-Han · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 · 2026-08-05T06:34:19Z

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: drag surface. Chromium builds drag regions from element rects and that pass never sees the top layer, so a showModal() 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 a no-drag titlebar 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 already inert. This also covers Astryx Dialog, which uses the same showModal() path.

Verification

apps/desktop Playwright 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 with none.
npm run lint, npm run format:check: clean.
Not run: OS-level hit testing cannot be exercised from Playwright, so the drag-region contract is asserted through computed style rather than a real window-manager click.

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 added 2 commits August 5, 2026 14:33

docs(desktop): trim the drag-region comments to the non-obvious fact
083204b

Astro-Han marked this pull request as ready for review August 5, 2026 06:54