[feat](trx-frontend-http): wrap and layer main controls

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-02-28 00:34:50 +01:00
parent b976465e37
commit b5cac4be41
2 changed files with 123 additions and 88 deletions
@@ -93,6 +93,30 @@ body {
line-height: 1.2;
}
.status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem 1rem; }
.controls-tray-shell {
min-width: 0;
}
.controls-tray-scroll {
width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 0.2rem;
}
.controls-tray {
display: grid;
gap: 0.95rem;
width: max(100%, 58rem);
min-width: 0;
padding: 0.95rem 1rem 1rem;
border: 1px solid color-mix(in srgb, var(--border-light) 85%, transparent);
border-radius: 1rem;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 88%, transparent),
color-mix(in srgb, var(--btn-bg) 76%, transparent));
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
}
input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem; font-size: 1rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); color: var(--text); }
#mode { height: var(--control-height); }
#freq { font-family: 'DSEG14 Classic', monospace; font-size: 2rem; padding: 0.5rem 0.6rem; letter-spacing: 0.05em; text-align: center; }
@@ -354,8 +378,10 @@ small { color: var(--text-muted); }
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 1rem;
margin-bottom: 0.5rem;
margin-bottom: -0.45rem;
padding: 0.25rem 0 0.15rem;
position: relative;
z-index: 2;
}
.header-text {
width: auto;
@@ -365,7 +391,10 @@ small { color: var(--text-muted); }
.title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
.overview-strip {
width: 100%;
margin: 0.35rem 0 0.95rem;
margin: 0 0 0.95rem;
padding-top: 0.8rem;
position: relative;
z-index: 1;
}
.overview-toolbar {
display: flex;
@@ -677,6 +706,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
.card { padding: 0.7rem 0.7rem 1rem; }
button { min-height: 2.8rem; font-size: 0.95rem; }
input.status-input, select.status-input { font-size: 1.1rem; }
.controls-tray { width: max(100%, 52rem); padding-left: 0.85rem; padding-right: 0.85rem; }
.freq-inline { gap: 0.5rem; }
.freq-inline { flex-wrap: wrap; }
.header-text { width: auto; min-width: 0; flex: 0 1 auto; }