mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-10-23 08:12:28 +00:00
fix(filters): unified 34px height for all filter controls across pages (#1192)
## 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>
This commit is contained in:
1 parent
51f823bf7e
commit
e078f4bbb6
2 files changed
+12
-5
No files matched your search
+3
-4
@@ -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>
|
||||
|
||||
+9
-1
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user