From 26f902662103ec8f45786d46e5029be4ffe620cf Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Mon, 24 Aug 2026 14:31:17 -0400
Subject: [PATCH] Fix width too big by adding min-width constraints

---
 src/components/AiSessionChatView.tsx | 10 +++++-----
 src/components/LogDataTable.tsx      | 10 +++++++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/AiSessionChatView.tsx b/src/components/AiSessionChatView.tsx
index b46cd5cf2..211f71da6 100644
--- a/src/components/AiSessionChatView.tsx
+++ b/src/components/AiSessionChatView.tsx
@@ -79,7 +79,7 @@ function MessageBubble({ message }: { message: NormalizedAiMessage }) {
                 )}
             </div>
             <div
-                className={`max-w-[80%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap break-words ${
+                className={`min-w-0 max-w-[80%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap break-words ${
                     isUser
                         ? "bg-primary text-primary-foreground"
                         : isTool
@@ -108,7 +108,7 @@ function RawFallbackBlock({
 }) {
     const pretty = prettyRaw(raw);
     return (
-        <div className="rounded-md border bg-muted/30 p-3">
+        <div className="min-w-0 rounded-md border bg-muted/30 p-3">
             <div className="mb-1 text-xs font-medium text-muted-foreground">
                 {label}
                 {pretty && unparsedLabel && (
@@ -117,7 +117,7 @@ function RawFallbackBlock({
                     </span>
                 )}
             </div>
-            <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words text-xs text-muted-foreground">
+            <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-all text-xs text-muted-foreground">
                 {pretty ?? noDataLabel}
             </pre>
         </div>
@@ -172,7 +172,7 @@ export function AiSessionChatView({
                 </Button>
             </div>
             {rawMode ? (
-                <div className="flex max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
+                <div className="flex min-w-0 max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
                     <RawFallbackBlock
                         label={t("aiSessionRequest")}
                         raw={normalizedRequest}
@@ -185,7 +185,7 @@ export function AiSessionChatView({
                     />
                 </div>
             ) : (
-                <div className="flex max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
+                <div className="flex min-w-0 max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
                     {hasRequestMessages ? (
                         requestMessages!.map((message, i) => (
                             <MessageBubble key={`req-${i}`} message={message} />
diff --git a/src/components/LogDataTable.tsx b/src/components/LogDataTable.tsx
index 6c17eb76c..b6e34ef80 100644
--- a/src/components/LogDataTable.tsx
+++ b/src/components/LogDataTable.tsx
@@ -524,9 +524,13 @@ export function LogDataTable<TData, TValue>({
                                                         }
                                                         className="p-4 bg-muted/50"
                                                     >
-                                                        {renderExpandedRow(
-                                                            row.original
-                                                        )}
+                                                        {/* w-0 min-w-full keeps this cell's content from */}
+                                                        {/* blowing out the table's auto column widths */}
+                                                        <div className="w-0 min-w-full">
+                                                            {renderExpandedRow(
+                                                                row.original
+                                                            )}
+                                                        </div>
                                                     </TableCell>
                                                 </TableRow>
                                             )