Skip to content

fix(filters): unified 34px height for all filter controls across pages#1192

Open
efiten wants to merge 1 commit into
Kpa-clawbot:masterfrom
efiten:fix/filter-control-height
Open

fix(filters): unified 34px height for all filter controls across pages#1192
efiten wants to merge 1 commit into
Kpa-clawbot:masterfrom
efiten:fix/filter-control-height

Conversation

@efiten
Copy link
Copy Markdown
Contributor

@efiten efiten commented May 12, 2026

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

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

🤖 Generated with Claude Code

…pages

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

- .filter-bar input/select: add min-height:34px (packets page, sort select)
- .nodes-filters select: add height+min-height:34px (nodes page)
- analytics: replace .time-window-filter+label with .analytics-filters flex
  row and .analytics-time-window-select styled to match region dropdown buttons
- .analytics-filters: flex row so region filter and time-window sit side by side

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
efiten added a commit to efiten/meshcore-analyzer that referenced this pull request May 12, 2026
…ects

Backport of PR Kpa-clawbot#1192: adds min-height:34px to .filter-bar input/select and
height+min-height to .nodes-filters select, overriding the global
select{min-height:48px} touch-target rule. Analytics fix already present.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant