sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
components/home.tsx
+16 -2
View File
@@ -51,6 +51,17 @@ export function Home() {
return (
<div className="relative h-dvh">
{/* Window-drag strip (merged chrome, owner 2026-09-17): a dedicated
mask element, deliberately FIRST in the DOM. Electron's app-region
mask resolves by DOM order — a no-drag element subtracts only drag
regions that came EARLIER in the tree — not by z-index, so the
header's old inline drag region (after <main>) re-added itself over
the graph chrome row's carve-out and the buttons dragged the window.
Placed first, every carved control (chrome row, node detail card,
the toggle) comes later and subtracts correctly. Pure mask: it
never needs to receive events — the mask routes the pixels. */}
<div className="lh-drag absolute inset-x-0 top-0 h-13" aria-hidden="true" />
{/* Graph — the main view, full-bleed (owner, graph-view round 1): no
padding on any side; the canvas runs from the sidebar to the right
edge and from the bottom to the top, under everything else. */}
@@ -59,8 +70,11 @@ export function Home() {
</main>
{/* Header floats over the graph — pointer-events-none except the
toggle, so the canvas stays draggable/hoverable around it. */}
<header className="lh-float-drag pointer-events-none absolute inset-x-0 top-0 flex items-center gap-2 px-3 py-2">
toggle, so the canvas stays draggable/hoverable around it. Carries
no app-region of its own: the strip's drag comes from the mask
div above, and the toggle's lh-no-drag subtracts from it (it is
later in the tree, so the subtraction sticks). */}
<header className="pointer-events-none absolute inset-x-0 top-0 flex items-center gap-2 px-3 py-2">
<div className="pointer-events-auto">
<SidebarToggle />
</div>