From 4091c6d6fb01237b1c17c6aa7e860e3f9a12fbf5 Mon Sep 17 00:00:00 2001
From: REKHA SUTHAR <71004640+rekha0suthar@users.noreply.github.com>
Date: Tue, 28 Jul 2026 12:56:48 +0530
Subject: [PATCH] fix: prevent layout shift when pasting long unbroken strings
 in input

Pasting a long unbroken string (e.g. base64 tokens, minified code) into
the composer input caused the TipTap editor to overflow its flex container,
which pushed the send button out of alignment and broke the input layout.

Two changes:
- Added overflow-wrap: break-word and word-break: break-word to the
  .tiptap CSS rule so long tokens wrap instead of overflowing.
- Added min-w-0 to the flex container in ContinueInputBox so that
  the flex child can shrink below its natural content width, which is
  required for overflow-wrap to take effect inside a flex layout.

Fixes #13016
---
 gui/src/components/mainInput/ContinueInputBox.tsx          | 2 +-
 gui/src/components/mainInput/TipTapEditor/TipTapEditor.css | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/gui/src/components/mainInput/ContinueInputBox.tsx b/gui/src/components/mainInput/ContinueInputBox.tsx
index c57dbd9d009..7d2f5192ef0 100644
--- a/gui/src/components/mainInput/ContinueInputBox.tsx
+++ b/gui/src/components/mainInput/ContinueInputBox.tsx
@@ -112,7 +112,7 @@ function ContinueInputBox(props: ContinueInputBoxProps) {
       className={`${props.hidden ? "hidden" : ""}`}
       data-testid={`continue-input-box-${props.inputId}`}
     >
-      <div className={`relative flex flex-col px-2`}>
+      <div className={`relative flex min-w-0 flex-col px-2`}>
         {props.isMainInput && <Lump />}
         <GradientBorder
           loading={isStreaming && (props.isLastUserInput || isInEdit) ? 1 : 0}
diff --git a/gui/src/components/mainInput/TipTapEditor/TipTapEditor.css b/gui/src/components/mainInput/TipTapEditor/TipTapEditor.css
index 3f2a2c7703f..8e1366db960 100644
--- a/gui/src/components/mainInput/TipTapEditor/TipTapEditor.css
+++ b/gui/src/components/mainInput/TipTapEditor/TipTapEditor.css
@@ -16,6 +16,12 @@
   transition: background-color 0.2s ease-in-out;
 }
 
+.tiptap {
+  overflow-wrap: break-word;
+  word-break: break-word;
+  min-width: 0;
+}
+
 .tiptap p.is-editor-empty:first-child::before {
   color: #646464; /* lightGray */
   content: attr(data-placeholder);