From c23c3ba4e3763a4b8df8a2d0db82e908fafd295d Mon Sep 17 00:00:00 2001
From: Jan <jan@example.com>
Date: Mon, 13 Apr 2026 21:03:25 +0200
Subject: [PATCH] refactor: polish unified live monitoring layout

---
 internal/control/ui.html | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/internal/control/ui.html b/internal/control/ui.html
index 1ddde2b..36e479d 100644
--- a/internal/control/ui.html
+++ b/internal/control/ui.html
@@ -126,22 +126,24 @@ button,input,select{font:inherit}button{user-select:none}
 .stack{display:flex;flex-direction:column;gap:12px}
 /* Cards */
 .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
-.hero{padding:16px}
+.hero{padding:14px 16px}
 .tab-panel[data-tab-panel="live"] .tab-columns.two{grid-template-columns:1fr}
 .tab-panel[data-tab-panel="live"] .stack{width:100%}
 .tab-panel[data-tab-panel="live"] .stack>.card{width:100%}
 .tab-panel[data-tab-panel="live"] .flow-board{margin-top:0}
 .tab-panel[data-tab-panel="live"] .sidebar-card{height:fit-content}
+.tab-panel[data-tab-panel="live"] .sidebar-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
+.tab-panel[data-tab-panel="live"] .sidebar-card .sidebar-section{min-width:0}
 /* TX Bar */
-.tx-bar{position:relative;z-index:1;display:grid;grid-template-columns:minmax(180px,250px) 1fr auto;gap:14px;align-items:center}
+.tx-bar{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,280px) auto auto;gap:10px;align-items:center}
 .freq-display-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
-.freq-display{font-size:40px;color:var(--text);letter-spacing:-.04em;line-height:1;font-weight:800}
+.freq-display{font-size:34px;color:var(--text);letter-spacing:-.04em;line-height:1;font-weight:800}
 .freq-display .unit{font-family:var(--mono);font-size:14px;color:var(--text-dim);margin-left:5px}
-.freq-note{display:flex;gap:12px;margin-top:6px;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
+.freq-note{display:flex;gap:10px;margin-top:4px;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
 .freq-note-item{display:inline-flex;align-items:center;gap:4px}
 .freq-note.mismatch .freq-note-item{color:var(--amber)}
-.tx-actions{display:flex;flex-wrap:wrap;gap:10px}
-.tx-state-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
+.tx-actions{display:flex;flex-wrap:wrap;gap:8px}
+.tx-state-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
 .tx-state{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim)}
 .tx-state.running{color:var(--green)}.tx-state.working,.tx-state.starting,.tx-state.stopping{color:var(--amber)}
 .tx-state.faulted,.tx-state.error{color:var(--red)}