From 5e147371527154be385f28e57339a71521e528c6 Mon Sep 17 00:00:00 2001
From: CursedApple <36764254+Serendeep@users.noreply.github.com>
Date: Sat, 15 Aug 2026 14:08:10 +0200
Subject: [PATCH] fix(web): scale command details with code font (#6510)
---
.github/pr-assets/6424-after.svg | 1 +
.github/pr-assets/6424-before.svg | 1 +
apps/web/src/components/chat/MessagesTimeline.test.tsx | 8 +++++++-
apps/web/src/components/chat/MessagesTimeline.tsx | 7 ++++---
4 files changed, 13 insertions(+), 4 deletions(-)
create mode 100644 .github/pr-assets/6424-after.svg
create mode 100644 .github/pr-assets/6424-before.svg
diff --git a/.github/pr-assets/6424-after.svg b/.github/pr-assets/6424-after.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dbeb594a09da96837006b6ead15cd49a35b17e72
--- /dev/null
+++ b/.github/pr-assets/6424-after.svg
@@ -0,0 +1 @@
+
diff --git a/.github/pr-assets/6424-before.svg b/.github/pr-assets/6424-before.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6b365bad6e699a5dfb45aa4ed34d5a11410c67ea
--- /dev/null
+++ b/.github/pr-assets/6424-before.svg
@@ -0,0 +1 @@
+
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index 194edc0bd5bb28b27ce98642964efca8f883c1ce..dfdfd1169653e9d9c539ed5a7c505dd7e08560b4 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -134,6 +134,7 @@ function matchMedia() {
}
let MessagesTimeline: typeof import("./MessagesTimeline").MessagesTimeline;
+let toolCallExpandedBodyClassName: typeof import("./MessagesTimeline").toolCallExpandedBodyClassName;
beforeAll(async () => {
const classList = {
@@ -167,7 +168,7 @@ beforeAll(async () => {
},
});
- ({ MessagesTimeline } = await import("./MessagesTimeline"));
+ ({ MessagesTimeline, toolCallExpandedBodyClassName } = await import("./MessagesTimeline"));
}, 30_000);
const ACTIVE_THREAD_ENVIRONMENT_ID = EnvironmentId.make("environment-local");
@@ -226,6 +227,11 @@ function buildUserTimelineEntry(text: string) {
}
describe("MessagesTimeline", () => {
+ it("sizes expanded tool details with the configured code font size", () => {
+ expect(toolCallExpandedBodyClassName).toContain("var(--font-size-code");
+ expect(toolCallExpandedBodyClassName).not.toContain("text-[11px]");
+ });
+
it("uses the larger leading inset only when the top fade is enabled", () => {
const timelineEntries = [buildUserTimelineEntry("Hello")];
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index f5c529ff315f33f6e54e49430638f3ae4eda30eb..9fe392d76a217f6f091010ed86e5484de0b783e3 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2059,6 +2059,9 @@ function buildToolCallExpandedBody(
return blocks.length > 0 ? blocks.join("\n\n") : null;
}
+export const toolCallExpandedBodyClassName =
+ "max-h-64 cursor-text overflow-auto whitespace-pre-wrap break-words font-mono text-secondary-label text-[length:var(--font-size-code,0.6875rem)] leading-relaxed select-text";
+
function workEntryIconName(workEntry: TimelineWorkEntry): WorkEntryIconName {
if (
workEntry.sourceActivityKind === "user-input.requested" ||
@@ -2369,9 +2372,7 @@ const PlainWorkEntryRow = memo(function PlainWorkEntryRow(props: {
onClick={stopRowToggle}
onPointerDown={stopRowToggle}
>
-
- {expandedBody}
-
+ {expandedBody}
) : null}
--
2.54.0