From 875b1108dec555a829d7b55428dbb1c1d91f6386 Mon Sep 17 00:00:00 2001
From: DeepSeek V4 Pro agent <agent@atlarix.dev>
Date: Thu, 9 Jul 2026 09:07:51 +0300
Subject: [PATCH] fix: prevent Enter/send button from being pushed off-screen
 by long code blocks (#12958)

Long code blocks without line breaks were causing the chat sidebar to
stretch horizontally, pushing the Enter/send button out of view. Two
issues combined:

1. pre elements used max-width: calc(100vw - 24px) which in a VS Code
   webview sidebar can be the full VS Code window width (~1900px), not
   the actual sidebar width (~400px), allowing code blocks to grow far
   beyond the panel.

2. The scrollable StepsDiv flex container lacked min-w-0, so CSS
   flexbox default min-width: auto prevented it from shrinking below
   oversized content, pushing the fixed input area off-screen.

Fixes:
- Chat.tsx: added min-w-0 to StepsDiv (flex-1 container)
- StyledMarkdownPreview/index.tsx: changed pre max-width from
  calc(100vw - 24px) to 100%, and overflow-x from scroll to auto
- SyntaxHighlightedPre.tsx: added max-width: 100% to StyledPre
- StepContainer.tsx: added min-w-0 to message wrapper div

Unlike the temporary CSS hotfix (#12910) which applies min-width: 0
to all flex elements globally and word-break: break-all to all
pre/code (making code unreadable), this fix is targeted at only the
specific elements in the overflow chain.

Closes #12958
Closes #12912

Co-authored-by: atlarix-agent <agent@atlarix.dev>
---
 gui/src/components/StepContainer/StepContainer.tsx            | 2 +-
 .../components/StyledMarkdownPreview/SyntaxHighlightedPre.tsx | 1 +
 gui/src/components/StyledMarkdownPreview/index.tsx            | 4 ++--
 gui/src/pages/gui/Chat.tsx                                    | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/gui/src/components/StepContainer/StepContainer.tsx b/gui/src/components/StepContainer/StepContainer.tsx
index fc6981d0558..51d8a820887 100644
--- a/gui/src/components/StepContainer/StepContainer.tsx
+++ b/gui/src/components/StepContainer/StepContainer.tsx
@@ -77,7 +77,7 @@ export default function StepContainer(props: StepContainerProps) {
   return (
     <div>
       <div
-        className={`bg-background p-1 px-1.5 ${isBeforeLatestSummary ? "opacity-35" : ""}`}
+        className={`bg-background min-w-0 p-1 px-1.5 ${isBeforeLatestSummary ? "opacity-35" : ""}`}
       >
         {uiConfig?.displayRawMarkdown ? (
           <pre className="text-2xs max-w-full overflow-x-auto whitespace-pre-wrap break-words p-4">
diff --git a/gui/src/components/StyledMarkdownPreview/SyntaxHighlightedPre.tsx b/gui/src/components/StyledMarkdownPreview/SyntaxHighlightedPre.tsx
index 6e4fc3e2be5..ad0f029e0ec 100644
--- a/gui/src/components/StyledMarkdownPreview/SyntaxHighlightedPre.tsx
+++ b/gui/src/components/StyledMarkdownPreview/SyntaxHighlightedPre.tsx
@@ -23,6 +23,7 @@ const StyledPre = styled.pre<{ theme: any }>`
   margin-top: 0;
   margin-bottom: 0;
   border-radius: 0 0 ${defaultBorderRadius} ${defaultBorderRadius} !important;
+  max-width: 100%;
   max-height: 40vh;
   overflow-y: scroll !important;
 
diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx
index 2ff217a6147..be30d60ebda 100644
--- a/gui/src/components/StyledMarkdownPreview/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/index.tsx
@@ -66,8 +66,8 @@ const StyledMarkdown = styled.div<{
     background-color: ${vscEditorBackground};
     border-radius: ${defaultBorderRadius};
 
-    max-width: calc(100vw - 24px);
-    overflow-x: scroll;
+    max-width: 100%;
+    overflow-x: auto;
     overflow-y: hidden;
 
     padding: 8px;
diff --git a/gui/src/pages/gui/Chat.tsx b/gui/src/pages/gui/Chat.tsx
index 00e04efd1f4..ffcb80aa1ef 100644
--- a/gui/src/pages/gui/Chat.tsx
+++ b/gui/src/pages/gui/Chat.tsx
@@ -386,7 +386,7 @@ export function Chat() {
 
       <StepsDiv
         ref={stepsDivRef}
-        className={`pt-[8px] ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "min-h-0 flex-1 overflow-y-scroll" : "shrink-0"}`}
+        className={`pt-[8px] ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "min-h-0 min-w-0 flex-1 overflow-y-scroll" : "shrink-0"}`}
       >
         <DeprecationBanner dismissable={true} />
         {highlights}