From 36f1590694ea19b97bbf7f668f4d69ade5346f0f Mon Sep 17 00:00:00 2001 From: efiten Date: Sat, 9 May 2026 11:26:09 +0200 Subject: [PATCH 1/2] fix(ui): align filter-bar button heights to 34px on desktop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .btn and .col-toggle-btn carry min-height:48px from the WCAG touch-target rule, overriding the explicit height:34px on .filter-bar .btn. This made buttons like 'Group by Hash', '★ My Nodes', and 'Columns ▾' visibly taller than the multi-select-trigger buttons ('All Observers', 'All Regions') which don't carry the .btn class and were already correct at 34px. Add min-height:34px to .filter-bar .btn, .filter-group .btn, and .filter-bar .col-toggle-btn. Touch targets unchanged on mobile (≤767px media query remains authoritative there). Co-Authored-By: Claude Sonnet 4.6 --- public/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/public/style.css b/public/style.css index ecc9d011..6153ea9f 100644 --- a/public/style.css +++ b/public/style.css @@ -664,20 +664,20 @@ input[type="week"] { .filter-bar input, .filter-bar select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--input-bg); color: var(--text); font-family: var(--font); - height: 34px; box-sizing: border-box; line-height: 1; + height: 34px; min-height: 34px; box-sizing: border-box; line-height: 1; } .filter-bar input { width: 120px; } .filter-bar select { min-width: 90px; } .filter-bar .btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); cursor: pointer; font-size: 13px; transition: all .15s; - font-family: var(--font); color: var(--text); height: 34px; box-sizing: border-box; line-height: 1; + font-family: var(--font); color: var(--text); height: 34px; min-height: 34px; box-sizing: border-box; line-height: 1; } .filter-group { display: flex; gap: 6px; align-items: center; } /* #1124 (MAJOR-3): each grouped cluster wraps as a single unit at narrow * widths instead of letting individual controls reflow across categories. */ .filter-bar .filter-group { flex-wrap: nowrap; } -.filter-group .btn { padding: 4px 10px; font-size: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); cursor: pointer; transition: background 0.15s, color 0.15s; } +.filter-group .btn { padding: 4px 10px; font-size: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); cursor: pointer; transition: background 0.15s, color 0.15s; height: 34px; min-height: 34px; box-sizing: border-box; line-height: 1; } .filter-group .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .filter-group .btn:hover:not(.active) { background: var(--surface-2); } .filter-group + .filter-group { border-left: 1px solid var(--border); padding-left: 12px; margin-left: 6px; } @@ -692,6 +692,7 @@ input[type="week"] { .sort-help:hover .sort-help-tip { display: block; } .filter-bar .btn:hover { background: var(--row-hover); } .filter-bar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } +.filter-bar .col-toggle-btn { height: 34px; min-height: 34px; } .btn-icon { background: none; border: 1px solid var(--border); border-radius: 6px; From 587d28cedaad7ae50b088393e9e68481b42a464e Mon Sep 17 00:00:00 2001 From: efiten Date: Sat, 9 May 2026 18:00:42 +0200 Subject: [PATCH 2/2] fix(ui): compact MESH LIVE panel from 4 rows to 2 rows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .live-overlay sets flex-direction:column on all overlay panels, but .live-header did not override it. With the new #liveAreaFilter child visible (populated once areas are configured), the panel stacked 4 rows: title, stats, toggles, area filter — taking ~1/3 of viewport height. Switch .live-header to flex-direction:row with flex-wrap:wrap so title and stats share the first line. Give .live-toggles flex:0 0 100% to force it to a second line. Move #liveAreaFilter inside .live-toggles so the area dropdown is inline with the other controls, eliminating the standalone fourth row. Audio controls get flex:0 0 100% so they still span a full row when shown. Co-Authored-By: Claude Sonnet 4.6 --- public/live.css | 8 +++++++- public/live.js | 1 + 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/public/live.css b/public/live.css index c5e67ea7..2f27b989 100644 --- a/public/live.css +++ b/public/live.css @@ -56,6 +56,8 @@ top: 64px; left: 12px; display: flex; + flex-direction: row; + flex-wrap: wrap; align-items: center; gap: 14px; background: color-mix(in srgb, var(--surface-1) 92%, transparent); @@ -280,14 +282,18 @@ border-top-color: var(--surface-1) !important; } +/* audio controls spans full row when visible */ +.live-header .audio-controls { flex: 0 0 100%; margin-left: 0; } + /* ---- Heatmap toggle ---- */ .live-toggles { display: flex; + flex: 0 0 100%; gap: 10px; font-size: 11px; color: var(--text-muted); align-items: center; - margin-left: 8px; + margin-left: 0; } .live-toggles label { display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; } .live-toggles input { margin: 0; } diff --git a/public/live.js b/public/live.js index a5a50bf3..c7b5fe7a 100644 --- a/public/live.js +++ b/public/live.js @@ -895,6 +895,7 @@
+