From fbf89e3bed9adebc033a26b7c43362c004e816a2 Mon Sep 17 00:00:00 2001
From: Will Pfleger <pfleger.will@gmail.com>
Date: Sat, 8 Aug 2026 12:59:41 -0400
Subject: [PATCH] fix(desktop): prevent horizontal clipping in Prompt Context
 modal (#5324)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Prompt Context modal (observer feed → check icon under sent
messages) was clipping all content and card right-padding at the dialog
edge.

**Root cause**: `PromptContextDialog` renders inside `DialogContent`,
which is a CSS grid. The child flex wrapper had default `min-width:
auto`, so the widest unbreakable token in the content (64-char hex event
IDs, `Tags: [[...]]` JSON) set the grid track width, blowing it past
`max-w-xl`. `overflow-hidden` then clipped everything at the dialog edge
— including the section cards' right padding.

**Fix**:
- `AgentSessionTranscriptList.tsx`: add `min-w-0` to the `flex
max-h-[85vh] flex-col` wrapper so the grid item can shrink below its
max-content width.
- `PromptSectionAccordion.tsx`: replace `wrap-break-word` with
`wrap-anywhere` on the body text (open and collapsed states) and the
title. `overflow-wrap: anywhere` reduces min-content width, which
`break-word` does not, letting long tokens wrap inside the cards rather
than inflating the track.

The `line-clamp-2` collapsed preview is preserved unchanged.

Signed-off-by: Will Pfleger <pfleger.will@gmail.com>
Co-authored-by: Duncan <dcfd242e557282d7a1e2cf2e6877522682f1e5c6156dc92ca7d90eaedd3b0f95@buzz.block.builderlab.xyz>
---
 .../src/features/agents/ui/AgentSessionTranscriptList.tsx   | 2 +-
 desktop/src/features/agents/ui/PromptSectionAccordion.tsx   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx b/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
index 29bfd7dba..d24c8fab7 100644
--- a/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
+++ b/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
@@ -747,7 +747,7 @@ function PromptContextDialog({
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent className="max-w-xl overflow-hidden p-0">
-        <div className="flex max-h-[85vh] flex-col">
+        <div className="flex min-w-0 max-h-[85vh] flex-col">
           <DialogHeader className="px-6 pb-3 pt-5 pr-14">
             <DialogTitle>Prompt context</DialogTitle>
             {setupText ? (
diff --git a/desktop/src/features/agents/ui/PromptSectionAccordion.tsx b/desktop/src/features/agents/ui/PromptSectionAccordion.tsx
index 0b5e58cc6..ad5346db1 100644
--- a/desktop/src/features/agents/ui/PromptSectionAccordion.tsx
+++ b/desktop/src/features/agents/ui/PromptSectionAccordion.tsx
@@ -47,7 +47,7 @@ export function PromptSectionAccordion({
             <div
               className={cn(
                 "text-sm font-semibold text-foreground",
-                !open && "line-clamp-2 wrap-break-word",
+                !open && "line-clamp-2 wrap-anywhere",
               )}
             >
               {section.title}
@@ -56,8 +56,8 @@ export function PromptSectionAccordion({
               className={cn(
                 "mt-1 text-xs leading-5 text-foreground/70",
                 open
-                  ? "whitespace-pre-wrap wrap-break-word"
-                  : "line-clamp-2 wrap-break-word",
+                  ? "whitespace-pre-wrap wrap-anywhere"
+                  : "line-clamp-2 wrap-anywhere",
               )}
             >
               {body.length > 0 ? (