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