fix(web): use a time-only timestamp in the compact column entries (#1616)

At the 320px column minimum the full ISO timestamp ate most of line 1. Use an
HH:MM:SS (UTC) form in the embedded HistoryEntry/NetworkEntry headers only; the
full-size layouts keep the full ISO string.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/HistoryEntry/HistoryEntry.test.tsx

@@ -212,7 +212,12 @@ describe("HistoryEntry", () => {
     renderWithMantine(
       <HistoryEntry {...baseProps} entry={successEntry} embedded />,
     );
-    // Line 1 essentials plus the method are still shown.
+    // Line 1 essentials plus the method are still shown. The timestamp is the
+    // compact time-only form (not the full ISO) to fit the narrow line.
+    expect(screen.getByText("10:30:00")).toBeInTheDocument();
+    expect(
+      screen.queryByText("2026-03-17T10:30:00.000Z"),
+    ).not.toBeInTheDocument();
     expect(screen.getByText("client → server")).toBeInTheDocument();
     expect(screen.getByText("142ms")).toBeInTheDocument();
     expect(screen.getByText("OK")).toBeInTheDocument();

clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx

@@ -83,6 +83,12 @@ function formatTimestamp(date: Date): string {
   return date.toISOString();
 }
 
+// Time-only (HH:MM:SS, UTC) for the compact column header, where the full ISO
+// string would eat most of the narrow line-1 width (#1616).
+function formatTimestampCompact(date: Date): string {
+  return date.toISOString().slice(11, 19);
+}
+
 function extractTarget(entry: MessageEntry): string | undefined {
   const msg = entry.message;
   if (!("params" in msg) || !msg.params) return undefined;
@@ -161,7 +167,7 @@ export function HistoryEntry({
             <HeaderRow>
               <HeaderCluster>
                 <TimestampText>
-                  {formatTimestamp(entry.timestamp)}
+                  {formatTimestampCompact(entry.timestamp)}
                 </TimestampText>
                 {directionBadge}
               </HeaderCluster>

clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx

@@ -35,7 +35,11 @@ describe("NetworkEntry", () => {
     renderWithMantine(
       <NetworkEntry entry={baseEntry} isListExpanded={false} embedded />,
     );
-    // Line 1: method, category, duration, status.
+    // Line 1: compact time-only timestamp, method, category, duration, status.
+    expect(screen.getByText("10:00:00")).toBeInTheDocument();
+    expect(
+      screen.queryByText("2026-03-17T10:00:00.000Z"),
+    ).not.toBeInTheDocument();
     expect(screen.getByText("POST")).toBeInTheDocument();
     expect(screen.getByText("transport")).toBeInTheDocument();
     expect(screen.getByText("45ms")).toBeInTheDocument();

clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx

@@ -89,6 +89,12 @@ function formatTimestamp(date: Date): string {
   return date.toISOString();
 }
 
+// Time-only (HH:MM:SS, UTC) for the compact column header, where the full ISO
+// string would eat most of the narrow line-1 width (#1616).
+function formatTimestampCompact(date: Date): string {
+  return date.toISOString().slice(11, 19);
+}
+
 function statusColor(entry: FetchRequestEntry): string {
   if (entry.error) return "red";
   const status = entry.responseStatus;
@@ -266,7 +272,7 @@ export function NetworkEntry({
             <HeaderRow>
               <HeaderCluster>
                 <TimestampText>
-                  {formatTimestamp(entry.timestamp)}
+                  {formatTimestampCompact(entry.timestamp)}
                 </TimestampText>
                 <Badge color="dark">{entry.method}</Badge>
                 <Badge color={categoryColor(entry.category)} variant="light">