Merge #166: lamp-only header on the content width

web/src/main.ts

@@ -146,7 +146,6 @@ function must<T extends Element>(selector: string): T {
 function main() {
   const board = must<HTMLElement>(".board");
   const masterLamp = must<HTMLElement>("#master-lamp");
-  const verdict = must<HTMLElement>("#master-verdict");
   const version = must<HTMLElement>("#version");
 
   const master = moduleRefs("master");
@@ -191,10 +190,9 @@ function main() {
 
     if (probe.kind === "unreachable") {
       masterLamp.dataset.state = "unreachable";
-      verdict.dataset.tone = "fault";
-      verdict.textContent = `daemon unreachable — ${probe.detail}`;
       version.textContent = "v —";
-      setModule(master, "unreachable", "fault", "down");
+      // the outage detail lives on the board's arr module — the header has no verdict line
+      setModule(master, "unreachable", "fault", "down", probe.detail);
       for (const refs of Object.values(checks)) {
         setModule(refs, "off", "idle", "no signal");
       }
@@ -208,8 +206,6 @@ function main() {
     const degraded = report.status === "degraded";
 
     masterLamp.dataset.state = degraded ? "degraded" : "ok";
-    verdict.dataset.tone = degraded ? "warn" : "ok";
-    verdict.textContent = degraded ? "chain degraded" : "all signals nominal";
     version.textContent = `v${report.version}`;
 
     setModule(master, degraded ? "degraded" : "ok", degraded ? "warn" : "ok", report.status);

web/src/style.css

@@ -134,15 +134,22 @@ body {
 /* ---- rails ---------------------------------------------------------- */
 
 .rail {
-  display: flex;
-  align-items: center;
-  gap: var(--space-6);
   padding: var(--space-3) var(--space-6);
   border-bottom: 1px solid var(--line);
   background: var(--panel);
   box-shadow: inset 0 1px var(--highlight);
 }
 
+/* contents share the deck's column; the panel itself stays full-bleed */
+.rail-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  width: 100%;
+  max-width: 68rem;
+  margin-inline: auto;
+}
+
 .rail-id {
   display: flex;
   align-items: center;
@@ -158,28 +165,13 @@ body {
   line-height: 1;
 }
 
-.rail-verdict {
-  margin: 0;
-  flex: 1;
-  color: var(--ink-muted);
-}
-
-.rail-verdict[data-tone="ok"] {
-  color: var(--signal-ok);
-}
-
-.rail-verdict[data-tone="warn"] {
-  color: var(--signal-warn);
-}
-
-.rail-verdict[data-tone="fault"] {
-  color: var(--signal-fault);
-}
-
 .rail-meta {
   display: flex;
   align-items: center;
   gap: var(--space-4);
+  /* the verdict line used to absorb the slack; without it the readout
+     needs to claim the right edge itself */
+  margin-left: auto;
 }
 
 /* ---- lamps ---------------------------------------------------------- */
@@ -1716,7 +1708,7 @@ body {
 /* ---- small screens --------------------------------------------------- */
 
 @media (max-width: 46rem) {
-  .rail {
+  .rail-inner {
     flex-wrap: wrap;
     gap: var(--space-3) var(--space-4);
   }
@@ -1734,11 +1726,6 @@ body {
     white-space: nowrap;
   }
 
-  .rail-verdict {
-    flex-basis: 100%;
-    order: 3;
-  }
-
   .rail-search {
     order: 4;
     flex-basis: 100%;