From f323c46a61ba117715dff625d27e7725598ec512 Mon Sep 17 00:00:00 2001
From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com>
Date: Mon, 31 Aug 2026 23:43:47 +0530
Subject: [PATCH] fix: Constrain traces table columns and show status text
 (#1526)

- Give Name/Status/Tokens/Spans/Time explicit widths so Name cannot shove others off-screen
- Show status label next to the status icon

Fixes #762

Signed-off-by: Vedant Madane <6527493+VedantMadane@users.noreply.github.com>
---
 ui/web/src/pages/traces/traces-page.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/web/src/pages/traces/traces-page.tsx b/ui/web/src/pages/traces/traces-page.tsx
index 04727ffe..123e6a50 100644
--- a/ui/web/src/pages/traces/traces-page.tsx
+++ b/ui/web/src/pages/traces/traces-page.tsx
@@ -174,11 +174,11 @@ export function TracesPage() {
             <table className="w-full min-w-[600px] text-sm">
               <thead>
                 <tr className="border-b bg-muted/50">
-                  <th className="px-4 py-3 text-left font-medium max-w-[40%]">{t("columns.name")}</th>
-                  <th className="px-3 py-3 text-center font-medium w-10"></th>
-                  <th className="px-4 py-3 text-left font-medium whitespace-nowrap">{t("columns.tokens")}</th>
-                  <th className="px-4 py-3 text-center font-medium whitespace-nowrap">{t("columns.spans")}</th>
-                  <th className="px-4 py-3 text-right font-medium whitespace-nowrap">{t("columns.time")}</th>
+                  <th className="px-4 py-3 text-left font-medium w-[36%] max-w-[280px]">{t("columns.name")}</th>
+                  <th className="px-3 py-3 text-left font-medium w-28 whitespace-nowrap">{t("columns.status")}</th>
+                  <th className="px-4 py-3 text-left font-medium w-28 whitespace-nowrap">{t("columns.tokens")}</th>
+                  <th className="px-4 py-3 text-center font-medium w-20 whitespace-nowrap">{t("columns.spans")}</th>
+                  <th className="px-4 py-3 text-right font-medium w-28 whitespace-nowrap">{t("columns.time")}</th>
                 </tr>
               </thead>
               <tbody>
@@ -227,7 +227,10 @@ export function TracesPage() {
                       </td>
                       <td className="px-3 py-2.5 text-center">
                         <div className="flex items-center justify-center gap-1">
-                          <StatusIcon status={trace.status} />
+                          <span className="inline-flex items-center gap-1.5">
+                    <StatusIcon status={trace.status} />
+                    <span className="text-xs capitalize text-muted-foreground">{trace.status || "unknown"}</span>
+                  </span>
                           {(trace.status === "running") && (
                             <Button
                               variant="destructive"