dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-06-10 00:01:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(#1128): apply z-index scale to dropdowns + Bug 1 chip line-height lock

Browse Source 
Implements audit Section 2 (renumber) and Section 3 Bug 1 polish.

Z-INDEX RENUMBER (audit Section 2)
The previous PR (#1131) added the --z-dropdown / --z-popover /
--z-modal / --z-tooltip tokens but explicitly left existing
literal values in place to avoid behavioural risk. The audit
called the renumber out as a follow-up; this commit does it for
the 7 selectors that mattered:

  .col-toggle-menu          50            → var(--z-dropdown) (100)
  .multi-select-menu        90            → var(--z-dropdown)
  .region-dropdown-menu     90            → var(--z-dropdown)
  .node-filter-dropdown     100           → var(--z-dropdown)
  .fux-saved-menu           var(--z-tooltip) → var(--z-dropdown)
  .fux-ac-dropdown          var(--z-tooltip) → var(--z-dropdown)
  .hop-conflict-popover     var(--z-tooltip) → var(--z-popover)

(Note: the audit listed .region-filter-options-menu and .fux-ctx-menu;
the former no longer exists in the current source, the latter is a
right-click context menu that should retain the tooltip-band
z-index — it must float above all toolbar UI by design.)

The result: dropdowns sit consistently at 100, popovers at 300,
tooltips/ctx-menus at 9200. No more 90-vs-9999 collisions where a
dropdown opened next to another paints under a sibling.

Updates the top-of-file doc-block to record the applied scale and
to point operators at scripts/check-css-vars.js for the lint that
catches undefined custom properties (Bug 4 root cause).

BUG 1 POLISH (audit Section 3)
- Locks .path-hops .hop / .hop-named / .arrow line-height to 18px
  so a mixed-metric chip (mono vs. proportional font) cannot
  overflow the 22px host vertically and bleed into the row above.
- Converts .col-path `max-height: 28px` to `height: 28px`. Per
  the audit, browsers widely ignore max-height on table cells; the
  earlier rule was a no-op. `height` on a <td> behaves as
  min-height and locks the row to a single chip line.

Refs #1128
This commit is contained in:
Kpa-clawbot
2026-05-06 06:54:01 +00:00
parent b9850c9f30
commit 6d16e6f1af
1 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.css
+38 -25
View File
@@ -1,27 +1,38 @@
/* === CoreScope — style.css === */
/* ============================================================
* Z-INDEX SCALE (single source of truth — issues #1128, #1131)
* Z-INDEX SCALE (single source of truth — issues #1128, #1131, #1128 followup)
* ------------------------------------------------------------
* Use these tokens for ANY new stacking context. Raw z-index
* literals in this file are legacy and being migrated. When
* touching a rule with a literal z-index, replace it with the
* appropriate token below.
* literals are legacy and being migrated. When touching a rule
* with a literal z-index, replace it with the appropriate token
* below.
*
* --z-base 0 document base, table cells
* --z-dropdown 100 in-flow dropdowns (multi-select,
* saved-filters, column-toggles)
* --z-dropdown 100 in-flow dropdowns anchored to a
* toolbar control (multi-select,
* saved-filter, column-toggle,
* autocomplete, region dropdown,
* node-filter dropdown)
* --z-popover 300 popovers anchored to a dropdown
* or table cell (path overflow,
* autocomplete row detail)
* or table cell (path-overflow +N,
* hop-conflict, autocomplete row
* detail). Sits ABOVE dropdowns
* but BELOW modals.
* --z-modal-backdrop 9000 full-viewport modal scrim
* --z-modal 9100 modal panels themselves
* --z-tooltip 9200 tooltips, ctx menus, hover popovers
* that must float above modals
*
* Migration policy: do NOT bulk-rewrite legacy values that
* currently work — risk/reward is poor. Migrate opportunistically
* when editing nearby rules. New rules MUST use the tokens.
* Lint: scripts/check-css-vars.js asserts every var(--name)
* reference resolves; CI will fail on undefined custom properties
* (see #1128 Bug 4 root cause — `--surface` shipped undefined
* and 8 dropdowns rendered transparent).
*
* Migration policy: legacy literal z-index values that work are
* left in place to avoid behavioural risk; new code MUST use
* the tokens. The 10 highest-traffic dropdowns/popovers in the
* packets toolbar were renumbered in the #1128 followup.
* ============================================================ */
/* ============================================================
@@ -778,13 +789,15 @@ input[type="week"] {
overflow: hidden;
vertical-align: middle;
}
.path-hops .hop { color: var(--accent); }
.path-hops .hop-named { color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 3px; font-family: var(--font); font-weight: 600; cursor: default; flex: 0 0 auto; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-hops .arrow { color: var(--text-muted); flex: 0 0 auto; }
/* #1122: bound the row height contributed by the path column. The data-table
* td already sets overflow:hidden + max-width:0; this caps the cell height
* so chips can never push the row past 28px regardless of hop count. */
.data-table td.col-path { max-height: 28px; line-height: 22px; }
.path-hops .hop { color: var(--accent); line-height: 18px; }
.path-hops .hop-named { color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 3px; font-family: var(--font); font-weight: 600; cursor: default; flex: 0 0 auto; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 18px; }
.path-hops .arrow { color: var(--text-muted); flex: 0 0 auto; line-height: 18px; }
/* #1122/#1128: bound the row height contributed by the path column.
* `max-height` on a <td> is widely ignored by browsers (table layout
* overrides it), so use `height` — table cells respect `height` as
* min-height, locking the row to a single line of chip content
* regardless of hop count. */
.data-table td.col-path { height: 28px; line-height: 22px; overflow: hidden; }
/* === Modal === */
.modal-overlay {
@@ -1902,7 +1915,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
border-radius: 6px;
max-height: 200px;
overflow-y: auto;
z-index: 100;
z-index: var(--z-dropdown);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.node-filter-dropdown.hidden { display: none; }
@@ -1972,7 +1985,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
.hop-conflict-btn { background: var(--status-yellow, #f59e0b); color: #000; border: none; border-radius: 4px; font-size: 11px;
font-weight: 700; padding: 1px 5px; cursor: pointer; vertical-align: middle; margin-left: 3px; line-height: 1.2; }
.hop-conflict-btn:hover { background: var(--status-yellow, #d97706); filter: brightness(0.85); }
.hop-conflict-popover { position: absolute; z-index: var(--z-tooltip); background: var(--surface-1); border: 1px solid var(--border);
.hop-conflict-popover { position: absolute; z-index: var(--z-popover); background: var(--surface-1); border: 1px solid var(--border);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); width: 260px; max-height: 300px; overflow-y: auto; }
.hop-conflict-header { padding: 10px 12px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border);
color: var(--text-muted); }
@@ -2050,7 +2063,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
/* #71 — Column visibility toggle */
.col-toggle-wrap { position: relative; display: inline-block; }
.col-toggle-btn { font-size: 13px; padding: 6px 10px; cursor: pointer; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); height: 34px; box-sizing: border-box; line-height: 1; }
.col-toggle-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.col-toggle-menu { display: none; position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.col-toggle-menu.open { display: block; }
.col-toggle-menu label { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: .82rem; cursor: pointer; color: var(--text); }
.col-toggle-menu label input[type="checkbox"] { width: 14px; height: 14px; margin: 0; flex-shrink: 0; }
@@ -2309,7 +2322,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
}
.region-dropdown-trigger:hover { border-color: var(--accent); color: var(--accent); }
.region-dropdown-menu {
position: absolute; top: 100%; left: 0; z-index: 90;
position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown);
min-width: 220px; width: max-content; max-height: 260px; overflow-y: auto;
background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px 0;
@@ -2340,7 +2353,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
}
.multi-select-trigger:hover { border-color: var(--accent); color: var(--accent); }
.multi-select-menu {
position: absolute; top: 100%; left: 0; z-index: 90;
position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown);
min-width: 220px; max-height: 260px; overflow-y: auto;
background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px 0; display: none;
@@ -3106,7 +3119,7 @@ th.sort-active { color: var(--accent, #60a5fa); }
.fux-examples { margin: 4px 0; padding-left: 20px; }
.fux-examples li { margin: 2px 0; }
.fux-ac-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; max-height: 280px; overflow-y: auto; z-index: var(--z-tooltip); box-shadow: 0 4px 12px rgba(0,0,0,0.25); margin-top: 2px; }
.fux-ac-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; max-height: 280px; overflow-y: auto; z-index: var(--z-dropdown); box-shadow: 0 4px 12px rgba(0,0,0,0.25); margin-top: 2px; }
.fux-ac-item { padding: 4px 10px; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 12px; }
.fux-ac-item:hover,
.fux-ac-item.active { background: var(--bg-hover, rgba(120,160,255,0.12)); }
@@ -3117,7 +3130,7 @@ th.sort-active { color: var(--accent, #60a5fa); }
.fux-ctx-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: var(--mono); }
.fux-ctx-item:hover { background: var(--bg-hover, rgba(120,160,255,0.12)); }
.fux-saved-menu { position: absolute; top: 100%; left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; z-index: var(--z-tooltip); box-shadow: 0 4px 14px rgba(0,0,0,0.3); margin-top: 4px; padding: 4px 0; }
.fux-saved-menu { position: absolute; top: 100%; left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; z-index: var(--z-dropdown); box-shadow: 0 4px 14px rgba(0,0,0,0.3); margin-top: 4px; padding: 4px 0; }
.fux-saved-menu.hidden { display: none; }
.fux-saved-header { padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.fux-saved-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; font-size: 12px; }