UI fix

ui/src/styles.css

@@ -292,6 +292,12 @@ pre {
   gap: 1.25rem;
 }
 
+.telemetry-compact {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
 .telemetry-section {
   min-width: 0;
   display: grid;
@@ -299,6 +305,60 @@ pre {
   gap: 0.55rem;
 }
 
+.telemetry-section--compact {
+  gap: 0.5rem;
+}
+
+.status-rows {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--app-border);
+}
+
+.status-row {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(4.75rem, 0.38fr) minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: baseline;
+  padding: 0.52rem 0;
+  border-bottom: 1px solid rgba(48, 57, 71, 0.7);
+}
+
+.status-row dt {
+  color: var(--app-muted);
+  font-size: 0.82rem;
+}
+
+.status-row dd {
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.55rem;
+  align-items: baseline;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.status-row strong {
+  color: #f2f6fb;
+  font-size: 0.96rem;
+  font-weight: 730;
+  line-height: 1.25;
+}
+
+.status-row span {
+  color: var(--app-muted);
+  font-size: 0.78rem;
+  line-height: 1.25;
+}
+
+.status-meter {
+  padding-top: 0.1rem;
+}
+
 .mini-status {
   display: inline-flex;
   align-items: center;
@@ -600,14 +660,19 @@ pre {
   font-size: 0.9rem;
 }
 
-.config-combo-field {
+.config-device-picker {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.config-device-picker__source {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 38px;
   gap: 0.45rem;
   align-items: stretch;
 }
 
-.config-combo-field .icon-button {
+.config-device-picker__source .icon-button {
   width: 38px;
   min-width: 38px;
   height: 38px;
@@ -1328,6 +1393,10 @@ pre {
     grid-template-columns: 1fr;
   }
 
+  .telemetry-compact {
+    grid-template-columns: 1fr;
+  }
+
   .panel__header button,
   .stack-panel__reload,
   .layer-card__actions button {