[fix](trx-frontend-http): improve recorder filter input and normalize file action button sizes

Widen the recordings filter input (remove max-width cap, set min-width),
add search icon placeholder, use type=search for native clear button.
Also fix download/remove button size mismatch with explicit height.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-04-04 12:42:35 +02:00
parent e1554d95c0
commit 8b840dbf9e
2 changed files with 4 additions and 2 deletions
@@ -1147,7 +1147,7 @@
<section class="recorder-section"> <section class="recorder-section">
<h3 class="recorder-section-heading">Recorded files</h3> <h3 class="recorder-section-heading">Recorded files</h3>
<div class="recorder-filter-bar"> <div class="recorder-filter-bar">
<input id="recorder-filter" type="text" class="status-input recorder-filter-input" placeholder="Filter by rig, freq, mode or date..." title="Filter recordings by filename — supports partial match (e.g. rig name, frequency, mode, date)" /> <input id="recorder-filter" type="search" class="status-input recorder-filter-input" placeholder="&#x1F50D; Filter recordings..." title="Filter recordings by filename — supports partial match (e.g. rig name, frequency, mode, date)" />
<select id="recorder-sort" class="status-input recorder-sort-select"> <select id="recorder-sort" class="status-input recorder-sort-select">
<option value="name-desc">Newest first</option> <option value="name-desc">Newest first</option>
<option value="name-asc">Oldest first</option> <option value="name-asc">Oldest first</option>
@@ -1215,7 +1215,7 @@ small { color: var(--text-muted); }
align-items: center; align-items: center;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
.recorder-filter-input { flex: 1; min-width: 0; max-width: 22rem; } .recorder-filter-input { flex: 1; min-width: 12rem; }
.recorder-sort-select { width: auto; min-width: 10rem; } .recorder-sort-select { width: auto; min-width: 10rem; }
.recorder-section { margin-bottom: 1.5rem; } .recorder-section { margin-bottom: 1.5rem; }
.recorder-section-heading { .recorder-section-heading {
@@ -1254,7 +1254,9 @@ small { color: var(--text-muted); }
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
margin: 0;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
height: 1.65rem;
font-size: 0.78rem; font-size: 0.78rem;
font-family: inherit; font-family: inherit;
line-height: 1.4; line-height: 1.4;