top bar drag standardization: auto carve-out + the overlay DOM law (owner ruling)

The chains-overlay TopBar had dead drag zones (counts, around search,
close gap) — cause: app-region subtraction resolves by DOM ORDER, not
z-index; the graph chrome's lh-no-drag column came later in the DOM and
punched holes through the overlay's drag band despite sitting visually
underneath (z-40 vs z-10).

Two laws, per the owner's standardization ruling:
- AUTO CARVE-OUT (globals.css): inside any .lh-drag band, every native
  interactive element (button/input/textarea/select/a/summary/
  [contenteditable]) is automatically a no-drag island — draggable
  anywhere that is not a clickable element becomes structural. Manual
  lh-no-drag is only for clickable non-natives.
- THE OVERLAY DOM LAW: a surface containing a TopBar that covers other
  content must be the LAST child of its container — ChainTableOverlay
  moved after the chrome column (verified live: last child, after the
  column; auto-carve rule compiled; search/close/sidebar-toggle all
  still click).
This commit is contained in:
amosblomqvist
2026-09-30 00:44:08 +03:00
parent edb10e3791
commit 4d58aa74b1
4 changed files with 53 additions and 20 deletions
+14
View File
@@ -478,6 +478,9 @@ body {
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
(native interactive elements carve out AUTOMATICALLY —
see the auto carve-out rule below; manual use is for
clickable non-natives only)
- .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
@@ -489,6 +492,17 @@ body {
.lh-electron .lh-no-drag {
-webkit-app-region: no-drag;
}
/* THE AUTO CARVE-OUT (owner standardization ruling, 2026-09-29 night):
inside a drag band, every NATIVE interactive element is automatically
a no-drag island — "draggable anywhere that is not a clickable
element" becomes structural, not per-child discipline. TopBar
contents can differ arbitrarily; buttons/inputs/links always stay
clickable with zero opt-out bookkeeping. Manual .lh-no-drag remains
only for clickable NON-native elements (spans/divs with onClick —
e.g. the graph chrome's control column). */
.lh-electron .lh-drag :is(button, input, textarea, select, a, summary, [contenteditable]) {
-webkit-app-region: no-drag;
}
/* 92px = measured lights' right edge (~75pt) + the lights' own 16px
inset from the window edge — comfortable, symmetric air (owner). */
.lh-electron .lh-lights-gutter {