From 40cc62a67f03a86f163d679ae15ef0df78e6e248 Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Thu, 30 Apr 2026 16:09:50 -0400
Subject: [PATCH] fix(ui): reserve stage column on every row for consistent
 alignment

PR-Agent flagged that trace child rows rendered an extra stage-hint
cell while the header grid template only had 7 columns. Result: every
expanded child shifted module/message/latency/request rightward, and
the stage chip overlapped its neighbour in the trace timeline.

Add a dedicated 72px "Stage" column to the header grid template and
to every row variant. Standalone leaves and trace heads render an
empty span at the same width; trace children with stage hints render
the chip in that slot. Column edges now match across all row types.

Refs #1138, #1151
---
 ui/src/components/logs/logs-entry-list.tsx |  10 +++++++---
 ui/src/components/logs/logs-row.tsx        |  12 +++++++++++-
 ui/src/components/logs/logs-trace-row.tsx  | Bin 5482 -> 5639 bytes
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/logs/logs-entry-list.tsx b/ui/src/components/logs/logs-entry-list.tsx
index 58049b9f..f8fe46dc 100644
--- a/ui/src/components/logs/logs-entry-list.tsx
+++ b/ui/src/components/logs/logs-entry-list.tsx
@@ -24,10 +24,13 @@ 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.
+// Column layout shared by the header and every row variant:
+//   chevron(16) · time(88) · level(64) · stage(72) · module(140) · message(flex) · latency(72) · request(112)
+// The dedicated `stage` column is rendered as an empty span on rows that
+// have no stage hint so column edges align across leaf, trace head, and
+// trace child rows alike.
 const COLS_TEMPLATE =
-  'grid grid-cols-[16px_88px_64px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
+  'grid grid-cols-[16px_88px_64px_72px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
 
 export function LogsEntryList({
   entries,
@@ -149,6 +152,7 @@ export function LogsEntryList({
         <span role="columnheader" aria-hidden="true" />
         <span role="columnheader">Time</span>
         <span role="columnheader">Level</span>
+        <span role="columnheader">Stage</span>
         <span role="columnheader">Module</span>
         <span role="columnheader">Message</span>
         <span role="columnheader" className="text-right">
diff --git a/ui/src/components/logs/logs-row.tsx b/ui/src/components/logs/logs-row.tsx
index 8875484a..c6675c39 100644
--- a/ui/src/components/logs/logs-row.tsx
+++ b/ui/src/components/logs/logs-row.tsx
@@ -59,6 +59,10 @@ function LogsRowImpl({
 
   const handleSelect = () => onSelect(entry.id);
   const handleKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    // Ignore keys that bubbled from a nested interactive element (e.g. the
+    // copy-requestId button). Without this guard, pressing Enter on the
+    // copy button would also select the row and shift the detail panel.
+    if (e.target !== e.currentTarget) return;
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       handleSelect();
@@ -106,6 +110,10 @@ function LogsRowImpl({
       <span role="cell" className="flex w-[64px] shrink-0 items-center">
         <LogLevelBadge level={entry.level} />
       </span>
+      {/* Always reserve the stage column so leaf, trace head, and trace
+          child rows all align under the same column edges in the header
+          grid template. Children with `stageHint` show a chip; rows
+          without one render an empty span at the same width. */}
       {stageHint ? (
         <span
           role="cell"
@@ -113,7 +121,9 @@ function LogsRowImpl({
         >
           {stageHint}
         </span>
-      ) : null}
+      ) : (
+        <span role="cell" className="w-[72px] shrink-0" aria-hidden="true" />
+      )}
       <span
         role="cell"
         className="w-[140px] shrink-0 truncate text-[12px] font-medium text-foreground/80"
diff --git a/ui/src/components/logs/logs-trace-row.tsx b/ui/src/components/logs/logs-trace-row.tsx
index 99a38b857149e8133b32b717dc14d1b88c97ceff..a9efd1aa8a10e4bbe427c880e3c887f4bcef3f15 100644
GIT binary patch
delta 117
zcmaE*)vmMQF`rwtzLtV(Zb3<<LUBoAda6Qleokp_o<drFkwSV=W{N^$PG)*uZfahM
zLV0FMhC)VaVoGX}g0@0VYGRr~QGR)`o`RNs?c~4wYJ%mu(dI@46|oA%8AX|S*}4Xk
V_wp-D<`6QNe1?Z(voyay8vxptD5n4b

delta 16
XcmZqId8M`CG2i4IUW3gW_`}%%J+%gO