From 0dfb7b85833aec6b26e0ae02452ecc19a9494629 Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Thu, 30 Apr 2026 14:56:32 -0400
Subject: [PATCH] fix(ui): reserve leading chevron column so trace and leaf
 rows align

Trace rows pushed the TIME column ~30px right because the expand chevron
was an inline flex child while leaf rows had nothing in that position.
Result: every column drifted right whenever a trace row was visible.

Reserve a 16px slot at the start of every row (header + leaf + trace).
Leaf rows render an empty span; trace rows render the chevron centered
inside the slot. All columns now share the same x-coordinates regardless
of row type.

Refs #1138
---
 ui/src/components/logs/logs-entry-list.tsx | 5 ++++-
 ui/src/components/logs/logs-row.tsx        | 3 +++
 ui/src/components/logs/logs-trace-row.tsx  | 5 ++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/logs/logs-entry-list.tsx b/ui/src/components/logs/logs-entry-list.tsx
index b12c0b24..d672bb0a 100644
--- a/ui/src/components/logs/logs-entry-list.tsx
+++ b/ui/src/components/logs/logs-entry-list.tsx
@@ -24,8 +24,10 @@ export interface LogsEntryListProps {
   density?: RowDensity;
 }
 
+// Leading 16px slot reserves space for the trace-expand chevron so that
+// trace rows and standalone leaf rows align under the same column edges.
 const COLS_TEMPLATE =
-  'grid grid-cols-[88px_64px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
+  'grid grid-cols-[16px_88px_64px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
 
 export function LogsEntryList({
   entries,
@@ -102,6 +104,7 @@ export function LogsEntryList({
           'h-9 shrink-0 border-b border-border bg-muted/30 text-[12px] font-medium uppercase tracking-wide text-muted-foreground'
         )}
       >
+        <span role="columnheader" aria-hidden="true" />
         <span role="columnheader">Time</span>
         <span role="columnheader">Level</span>
         <span role="columnheader">Module</span>
diff --git a/ui/src/components/logs/logs-row.tsx b/ui/src/components/logs/logs-row.tsx
index 74c5d020..629eb66d 100644
--- a/ui/src/components/logs/logs-row.tsx
+++ b/ui/src/components/logs/logs-row.tsx
@@ -78,6 +78,9 @@ function LogsRowImpl({
         isSelected && 'bg-muted/60 shadow-[inset_2px_0_0_var(--ring)]'
       )}
     >
+      {/* Leading 16px slot mirrors the trace-row chevron column so leaf
+          rows align under the same column edges as trace rows. */}
+      <span className="w-4 shrink-0" aria-hidden="true" />
       <span
         role="cell"
         className={cn('w-[88px] shrink-0 truncate text-[12px] text-muted-foreground', MONO_NUMERIC)}
diff --git a/ui/src/components/logs/logs-trace-row.tsx b/ui/src/components/logs/logs-trace-row.tsx
index 2ea87f08..32bd1bf4 100644
--- a/ui/src/components/logs/logs-trace-row.tsx
+++ b/ui/src/components/logs/logs-trace-row.tsx
@@ -94,7 +94,10 @@ function LogsTraceRowImpl({
           FOCUS_RING
         )}
       >
-        <Chevron className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+        {/* Reserve the same 16px slot as leaf rows so all columns align. */}
+        <span className="flex w-4 shrink-0 items-center justify-center" aria-hidden="true">
+          <Chevron className="h-3.5 w-3.5 text-muted-foreground" />
+        </span>
         <span
           role="cell"
           className={cn(