From 234822e81035aee0b3d7b512f3ae271ebeaaae41 Mon Sep 17 00:00:00 2001
From: iris <iris@pr1ma.darkest.space>
Date: Sun, 26 Jul 2026 17:22:52 +0200
Subject: [PATCH] =?UTF-8?q?fix(schedules,call):=20rotate=20agent=20columns?=
 =?UTF-8?q?=2090=C2=B0=20+=20coherent=20history=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #2720 (partial — schedules + call history fixes).

schedules:
- Agent-name column headers: switch from -45° CSS transform (which clipped
  names mid-glyph) to writing-mode:vertical-rl + rotate(180deg). Names now
  read bottom-to-top without truncation in their 28px column.
- Shrink 'next' column from 8em → 5.5em and 'every' from 7em → 5em;
  these only hold short duration strings so the wider widths wasted space.

call history:
- Approval history <li> items now get a lightweight card treatment
  (bg-elev background, 1px border, 3px left accent) matching the visual
  weight of the pending .approval-card items above them.
- Left border colour reflects outcome via :has(.glyph-*): green for
  approved, red for denied, amber for failed.
---
 frontend/packages/dashboard/src/dashboard.css | 47 ++++++++++++++-----
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index 8eb41047..ea2a096b 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -582,6 +582,20 @@ body.dashboard-shell {
   background: color-mix(in srgb, var(--purple) 8%, transparent);
   text-shadow: 0 0 4px currentColor;
 }
+/* History items: lighter card treatment so they're visually coherent with
+   the pending .approval-card items above them. Left accent colour reflects
+   the outcome via :has() on the per-status glyph span. */
+.approvals-history li {
+  background: color-mix(in srgb, var(--bg-elev) 40%, transparent);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--subtext0);
+  border-radius: 3px;
+  padding: 0.35em 0.8em;
+  margin-bottom: 0.4em;
+}
+.approvals-history li:has(.glyph-approved) { border-left-color: var(--green); }
+.approvals-history li:has(.glyph-denied)   { border-left-color: var(--red); }
+.approvals-history li:has(.glyph-failed)   { border-left-color: var(--amber); }
 .approvals-history .status { font-size: 0.85em; padding: 0 0.5em; }
 .status-approved { color: var(--green); }
 .status-denied { color: var(--red); }
@@ -1023,34 +1037,41 @@ footer .banner-thin {
   white-space: nowrap;
 }
 .schedules-table-id { width: 3em; text-align: center; }
-.schedules-table-next-col { width: 8em; white-space: nowrap; }
-.schedules-table-every-col { width: 7em; white-space: nowrap; }
+/* next / every columns: sized to typical content (short durations).
+   Previous 8em / 7em wasted horizontal space. */
+.schedules-table-next-col { width: 5.5em; white-space: nowrap; }
+.schedules-table-every-col { width: 5em; white-space: nowrap; }
 .schedules-table-body-th { min-width: 12em; }
 .schedules-table-actions-th { width: 7em; }
+/* Agent-name columns: 90° vertical text (writing-mode) so names are fully
+   readable without truncation. Previously used a -45° CSS transform which
+   clipped names mid-glyph. writing-mode + rotate(180deg) is in-flow and
+   needs no absolute positioning or overflow hacks. */
 .schedules-table-agent-th {
   width: 28px;
   min-width: 28px;
-  height: 95px;
-  padding: 0 !important;
+  height: 8em;
+  padding: 4px 2px !important;
   vertical-align: bottom;
-  white-space: nowrap;
   text-transform: none !important;
   letter-spacing: 0 !important;
-  position: relative;
+  overflow: hidden;
 }
 .schedules-table-agent-th > div {
-  position: absolute;
-  bottom: 4px;
-  left: 14px;
-  transform-origin: left bottom;
-  transform: rotate(-45deg);
   font-family: ui-monospace, 'JetBrains Mono', monospace;
-  font-size: 0.9em;
+  font-size: 0.85em;
   color: var(--fg);
+  /* Rotate 90° bottom-to-top (conventional rotated column header). */
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 7.5em;
 }
 .schedules-table-agent-th > div > span {
   display: inline-block;
-  padding: 0 4px 1px;
+  padding: 0 2px;
 }
 /* Column for an agent no longer in the live roster — its past schedules
    linger but the agent is gone. Greyed + struck through so the operator