From 0170b9caf5b46de47fe9f5f2b7d74c7a9bc48060 Mon Sep 17 00:00:00 2001
From: Christian Rey Villablanca <chriztiann.villablanca@gmail.com>
Date: Tue, 4 Aug 2026 13:34:52 +0800
Subject: [PATCH] fix(chat): contain activity response previews

---
 tests/regression/chat-css-regression.test.mjs | 17 +++++++++++++++++
 webview/shared/src/chat/MessageComponents.tsx |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/tests/regression/chat-css-regression.test.mjs b/tests/regression/chat-css-regression.test.mjs
index 45487ec..08564fb 100644
--- a/tests/regression/chat-css-regression.test.mjs
+++ b/tests/regression/chat-css-regression.test.mjs
@@ -19,6 +19,10 @@ const panelComponentsSource = readSource(
   [joinFromRoot('webview', 'shared', 'src', 'chat', 'PanelComponents.tsx')],
   'panel components source',
 );
+const messageComponentsSource = readSource(
+  [joinFromRoot('webview', 'shared', 'src', 'chat', 'MessageComponents.tsx')],
+  'message components source',
+);
 
 test('chat source css keeps active Tailwind directives', () => {
   assert.match(chatCssSource, /^\s*@tailwind\s+base\s*;/m, 'chat source css must include @tailwind base directive');
@@ -136,6 +140,19 @@ test('activity path tooltips use an owned opaque surface', () => {
   );
 });
 
+test('response previews stay contained inside activity cards', () => {
+  assert.match(
+    messageComponentsSource,
+    /const responseSectionClass = hasResponseContent\s*\? "min-w-0 max-w-full overflow-hidden rounded-md border border-oc-border-soft bg-background p-2\.5 shadow-sm"/,
+    'response cards must clip oversized activity output to their own boundary',
+  );
+  assert.match(
+    messageComponentsSource,
+    /"relative min-w-0 max-w-full mt-1\.5 space-y-1\.5",\s*shouldConstrainResponsePreview && "max-h-32 overflow-hidden"/,
+    'the bounded response preview must shrink with its card so its expand control remains visible',
+  );
+});
+
 // ── Markdown list styling regression tests ───────────────────────────────────────
 
 test('markdown-body ordered lists must display with decimal numbers (not bullets)', () => {
diff --git a/webview/shared/src/chat/MessageComponents.tsx b/webview/shared/src/chat/MessageComponents.tsx
index 0dc3c87..1129ff8 100644
--- a/webview/shared/src/chat/MessageComponents.tsx
+++ b/webview/shared/src/chat/MessageComponents.tsx
@@ -11742,7 +11742,7 @@ const hasVisibleResponseSectionContent =
   }, [responseChunksToRender, shouldConstrainResponsePreview]);
 
   const responseSectionClass = hasResponseContent
-    ? "rounded-md border border-oc-border-soft bg-background p-2.5 shadow-sm"
+    ? "min-w-0 max-w-full overflow-hidden rounded-md border border-oc-border-soft bg-background p-2.5 shadow-sm"
     : "p-0 border-0 bg-transparent shadow-none";
   const hasCopyableResponseContent = (visibleResolvedContent?.trim()?.length ?? 0) > 0;
   const handleCopy = async () => {
@@ -12750,7 +12750,7 @@ const hasVisibleResponseSectionContent =
                 <div
                   ref={responsePreviewRef}
                   className={cn(
-                    "relative mt-1.5 space-y-1.5",
+                    "relative min-w-0 max-w-full mt-1.5 space-y-1.5",
                     shouldConstrainResponsePreview && "max-h-32 overflow-hidden",
                   )}
                 >