diff --git a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.test.tsx b/clients/web/src/components/groups/HistoryEntry/HistoryEntry.test.tsx
index 8ebce289..e144e65d 100644
--- a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.test.tsx
+++ b/clients/web/src/components/groups/HistoryEntry/HistoryEntry.test.tsx
@@ -212,7 +212,12 @@ describe("HistoryEntry", () => {
renderWithMantine(
,
);
- // 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();
diff --git a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx b/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx
index 9546ee3b..a76ad4f9 100644
--- a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx
+++ b/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({
- {formatTimestamp(entry.timestamp)}
+ {formatTimestampCompact(entry.timestamp)}
{directionBadge}
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
index 5f37ad51..e0c09b5a 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
+++ b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
@@ -35,7 +35,11 @@ describe("NetworkEntry", () => {
renderWithMantine(
,
);
- // 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();
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
index c80baee5..08bb937b 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
+++ b/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({
- {formatTimestamp(entry.timestamp)}
+ {formatTimestampCompact(entry.timestamp)}
{entry.method}