From e078f4bbb60d0138c6c63272f9dd374d7561291a Mon Sep 17 00:00:00 2001
From: efiten <erwin.fiten@gmail.com>
Date: Thu, 21 May 2026 05:56:38 +0200
Subject: [PATCH] fix(filters): unified 34px height for all filter controls
 across pages (#1192)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

The global `select { min-height: 48px }` touch-target rule was taller
than the 34px custom dropdown buttons (region filter, multi-select
dropdowns), causing visible height inconsistency on the packets,
analytics, and nodes pages.

- **`.filter-bar input/select`** — add `min-height: 34px` to match
existing `height: 34px` (packets page: time window, channel, sort
selects and text inputs)
- **`.nodes-filters select`** — add `height: 34px; min-height: 34px`
(nodes page: last-heard select)
- **Analytics page** — replace `.time-window-filter` + label with
`.analytics-filters` flex row; style `#analyticsTimeWindow` with
`.analytics-time-window-select` to match region dropdown button height
and appearance
- All filter controls now sit at a consistent 34px, matching the
existing custom dropdown buttons

Supersedes #1191 (which only fixed the analytics case).

## Test plan

- [x] Packets page: time window, channel, sort selects are same height
as Filters/Group by Hash/My Nodes buttons
- [x] Analytics page: region filter and time-window select sit side by
side at the same height
- [x] Nodes page: last-heard select is same height as All/Active/Stale
buttons
- [x] On mobile, filter controls wrap correctly (flex-wrap)
- [x] Dark theme: select background and border match surrounding
controls

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/analytics.js |  7 +++----
 public/style.css    | 10 +++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/public/analytics.js b/public/analytics.js
index c998938a..5c2df759 100644
--- a/public/analytics.js
+++ b/public/analytics.js
@@ -96,10 +96,9 @@
         <div class="analytics-header">
           <h2>📊 Mesh Analytics</h2>
           <p class="text-muted">Deep dive into your mesh network data</p>
-          <div id="analyticsRegionFilter" class="region-filter-container"></div>
-          <div class="time-window-filter" style="margin:8px 0">
-            <label for="analyticsTimeWindow" style="font-size:0.9em;color:var(--text-muted);margin-right:6px">Time window:</label>
-            <select id="analyticsTimeWindow" data-testid="analytics-time-window" aria-label="Time window">
+          <div class="analytics-filters">
+            <div id="analyticsRegionFilter" class="region-filter-container"></div>
+            <select id="analyticsTimeWindow" class="analytics-time-window-select" data-testid="analytics-time-window" aria-label="Time window">
               <option value="">All data</option>
               <option value="1h">Last 1 hour</option>
               <option value="24h">Last 24 hours</option>
diff --git a/public/style.css b/public/style.css
index 8bc92257..00c13bef 100644
--- a/public/style.css
+++ b/public/style.css
@@ -712,7 +712,7 @@ 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; }
@@ -1362,6 +1362,7 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
 .nodes-filters 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; min-height: 34px; box-sizing: border-box; line-height: 1;
 }
 
 /* Node Detail */
@@ -2641,6 +2642,13 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
   font-size: 12px; font-weight: 600; color: var(--text-muted); align-self: center;
   margin-right: 2px; user-select: none;
 }
+.analytics-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
+.analytics-time-window-select {
+  height: 34px; min-height: 34px; padding: 0 10px; border-radius: 6px; box-sizing: border-box;
+  font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border);
+  background: var(--input-bg); color: var(--text); transition: border-color 0.15s;
+}
+.analytics-time-window-select:hover { border-color: var(--accent); }
 .region-dropdown-wrap { position: relative; display: inline-flex; align-items: center; }
 .region-dropdown-trigger {
   display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 6px;