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:
+16
-5
@@ -11,17 +11,28 @@
|
||||
*
|
||||
* Mechanics baked in (the chat-session bar's proven pattern):
|
||||
* - h-15 (60px) — matches the sidebar's wordmark band, one border line.
|
||||
* - lh-drag — the window-drag band; interactive children carve out with
|
||||
* lh-no-drag (the mask law: carve-outs must come later in the DOM).
|
||||
* - lh-drag — the window-drag band. NATIVE interactive children
|
||||
* (button/input/a/…) carve out AUTOMATICALLY via the globals.css auto
|
||||
* carve-out rule (owner standardization ruling, 2026-09-29 night) —
|
||||
* "draggable anywhere that is not a clickable element" is structural,
|
||||
* not per-child discipline; manual lh-no-drag is only for clickable
|
||||
* non-natives (spans/divs with onClick).
|
||||
* - select-none — dragging never highlights the title.
|
||||
* - SidebarToggle FIRST — the sidebar reopen when closed, with its
|
||||
* Electron traffic-light gutter (lh-closed-toggle).
|
||||
* - border-b border-border px-3, gap-3 rhythm.
|
||||
*
|
||||
* The consumer brings the title (font-title text-3xl tracking-tight) and
|
||||
* any right-side controls (lh-no-drag on each). `drag={false}` is the one
|
||||
* escape hatch — chat's rename mode (app-region:drag would eat the
|
||||
* mousedown that exits the input; owner ask).
|
||||
* any right-side controls. `drag={false}` is the one escape hatch —
|
||||
* chat's rename mode (app-region:drag would eat the mousedown that
|
||||
* exits the input; owner ask).
|
||||
*
|
||||
* THE OVERLAY TWIN OF THE MASK LAW (owner, 2026-09-29 night): app-region
|
||||
* subtraction resolves by DOM order, not z-index — a surface containing
|
||||
* a TopBar that COVERS other content (a full-bleed overlay) must be the
|
||||
* LAST child of its container, or later no-drag elements punch dead
|
||||
* zones through the bar (the chains-overlay bug: the graph chrome's
|
||||
* no-drag column killed drag over the counts/search/close area).
|
||||
*/
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
Reference in New Issue
Block a user