From 57e1d09bc6ec4ebbc4db6530e4e9ac830e890878 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 17 Apr 2026 15:41:29 +0200
Subject: [PATCH] fix(ui): align Timeline panel header with Application Log

Both panels now use the same card wrapper (logStyles.logCard), header
container (logStyles.logHeader, 12px 16px padding), and DS SectionHeader
for the title. Previously Timeline rendered a custom 13px span while
Application Log used SectionHeader's uppercase style, so the two panels
side-by-side looked inconsistent.

Removes the now-orphaned .eventCard/.eventCardHeader/.sectionTitle and
.timelineCard/.timelineHeader CSS rules.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../pages/AgentHealth/AgentHealth.module.css  | 23 -------------------
 ui/src/pages/AgentHealth/AgentHealth.tsx      |  6 ++---
 .../AgentInstance/AgentInstance.module.css    | 14 -----------
 ui/src/pages/AgentInstance/AgentInstance.tsx  |  6 ++---
 4 files changed, 6 insertions(+), 43 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 8033221e..119423cf 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -65,13 +65,6 @@
   align-self: flex-end;
 }
 
-/* Section header */
-.sectionTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
 .sectionMeta {
   font-size: 12px;
   color: var(--text-muted);
@@ -249,22 +242,6 @@
   margin-top: 20px;
 }
 
-/* Event card (timeline panel) — card styling via sectionStyles.section */
-.eventCard {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  max-height: 420px;
-}
-
-.eventCardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
 /* Compact app card */
 .compactCard {
   background: color-mix(in srgb, var(--card-accent) 8%, var(--bg-raised));
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index f2b82a0f..710bcd16 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -975,9 +975,9 @@ export default function AgentHealth() {
           </InfiniteScrollArea>
         </div>
 
-        <div className={`${sectionStyles.section} ${styles.eventCard}`}>
-          <div className={styles.eventCardHeader}>
-            <span className={styles.sectionTitle}>Timeline</span>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
+            <SectionHeader>Timeline</SectionHeader>
             <div className={logStyles.headerActions}>
               <span className={styles.sectionMeta}>{eventStream.items.length} events</span>
               <Button variant="ghost" size="sm" onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
diff --git a/ui/src/pages/AgentInstance/AgentInstance.module.css b/ui/src/pages/AgentInstance/AgentInstance.module.css
index bbcf8454..02e59a88 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.module.css
+++ b/ui/src/pages/AgentInstance/AgentInstance.module.css
@@ -84,17 +84,3 @@
   min-height: 300px;
 }
 
-/* Timeline card — card styling via sectionStyles.section */
-.timelineCard {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.timelineHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index 59d1a872..df225e01 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -481,9 +481,9 @@ export default function AgentInstance() {
           </InfiniteScrollArea>
         </div>
 
-        <div className={`${sectionStyles.section} ${styles.timelineCard}`}>
-          <div className={styles.timelineHeader}>
-            <span className={styles.chartTitle}>Timeline</span>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
+            <SectionHeader>Timeline</SectionHeader>
             <div className={logStyles.headerActions}>
               <span className={styles.chartMeta}>{eventStream.items.length} events</span>
               <button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>