fix: Electron drag mask resolves by DOM order, not z-index

The home header carried -webkit-app-region: drag after <main> in the
tree, re-adding drag over the graph chrome row's no-drag carve-out —
Electron's mask applies carve-outs only to regions added EARLIER in the
DOM walk, so the gear/search/coverage/import buttons dragged the window.

Fix: a dedicated 52px drag-mask div placed FIRST in the home page DOM;
every carved control (chrome row, node detail card, toggle) comes later
and subtracts correctly. The header loses its app-region entirely — the
mask routes the pixels, the header stays a pure pointer-events container.
Retires the .lh-float-drag CSS class.

Verified live in the Electron dev shell by the owner: chrome row,
sidebar close button, logo, and window drag all work.
This commit is contained in:
amosblomqvist
2026-09-17 18:33:59 +03:00
parent 6e08d77ec2
commit 9863674a76
2 changed files with 20 additions and 10 deletions
+4 -8
View File
@@ -313,15 +313,15 @@ body {
in the plain browser — it keys off <html class="lh-electron">, which
SidebarProvider sets after mount when it detects the Electron shell.
- .lh-drag window-drag region (must sit on pointer-receiving els)
- .lh-drag window-drag region — on a dedicated mask div in
home.tsx placed FIRST in the page DOM (the mask
resolves by DOM order, not z-index: no-drag subtracts
only regions added earlier in the tree)
- .lh-no-drag carve-out for interactive elements inside a drag band
- .lh-lights-gutter the sidebar LH band's traffic-light gutter: lights
end at x≈68, the wordmark starts at 80px (5rem)
- .lh-closed-toggle same gutter for the sidebar toggle when the sidebar
is closed — the lights are static, the toggle moves
- .lh-float-drag the home header strip floats pointer-events-none over
the graph; only in Electron does it claim events and
become the drag surface for that page
───────────────────────────────────────────────────────────────────────── */
.lh-electron .lh-drag {
-webkit-app-region: drag;
@@ -337,7 +337,3 @@ body {
.lh-electron .lh-closed-toggle {
margin-left: 92px;
}
.lh-electron .lh-float-drag {
pointer-events: auto;
-webkit-app-region: drag;
}