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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user