From 5b1ed49a2e3c1e66dac4170383d01c8d35a9c658 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Tue, 26 Aug 2025 12:12:19 -0500
Subject: [PATCH] fix: prevent layout shifts in code blocks during streaming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed critical issue where code blocks would cause the entire layout to jump/flash
during message streaming, particularly on mobile. This was causing accessibility
issues including triggering seizures for some users.

The root cause was that as content streamed in, the browser would recalculate
whether horizontal scrolling was needed, changing the code block height and
causing layout reflow.

Changes:
- Set code elements to use width: max-content with min-width: 100% to maintain consistent dimensions
- Changed display from inline-block to block for proper width calculations
- Set overflow-x: visible on code elements to let parent handle scrolling
- Added proper width constraints to pre elements
- Wrapped PreCode component in full-width container
- Disabled transitions to prevent animation flicker

This ensures code blocks maintain consistent height regardless of content length,
preventing the disorienting jumping effect during streaming.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/chat.css                | 18 +++++++++++++-----
 frontend/src/components/markdown.tsx | 11 +++++++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/chat.css b/frontend/src/chat.css
index ced6d1d60..70666447f 100644
--- a/frontend/src/chat.css
+++ b/frontend/src/chat.css
@@ -774,24 +774,30 @@
 .markdown-body .highlight pre,
 .markdown-body pre {
   padding: 16px 16px 8px 16px;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
   font-size: 85%;
   line-height: 1.45;
   border-radius: 6px;
   direction: ltr;
+  width: 100%;
+  min-width: 100%;
+  box-sizing: border-box;
 }
 
 .markdown-body pre code,
 .markdown-body pre tt {
-  display: inline-block;
-  max-width: 100%;
+  display: block;
   padding: 0;
   margin: 0;
-  overflow-x: scroll;
+  overflow-x: visible;
   line-height: inherit;
   word-wrap: normal;
   background-color: transparent;
   border: 0;
+  white-space: pre;
+  width: max-content;
+  min-width: 100%;
 }
 
 .markdown-body .csv-data td,
@@ -1076,8 +1082,9 @@
 
 .markdown-body pre code {
   display: block;
-  overflow-x: auto;
+  overflow-x: visible;
   padding: 1em;
+  box-sizing: border-box;
 }
 
 .markdown-body code {
@@ -1087,6 +1094,7 @@
 .markdown-body .hljs,
 .markdown-body pre {
   @apply text-foreground bg-muted;
+  transition: none;
 }
 
 /* Theme: Tokyo-night-Dark
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index abbf04e5c..831a237c6 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -223,7 +223,7 @@ export function PreCode(props: JSX.IntrinsicElements["pre"]) {
   }, []);
 
   return (
-    <>
+    <div className="w-full">
       <div className="flex justify-end pt-2 mb-1">
         <Button
           variant="ghost"
@@ -252,8 +252,10 @@ export function PreCode(props: JSX.IntrinsicElements["pre"]) {
           )}
         </Button>
       </div>
-      <pre ref={ref}>{props.children}</pre>
-    </>
+      <pre ref={ref} className="w-full overflow-x-auto">
+        {props.children}
+      </pre>
+    </div>
   );
 }
 
@@ -655,7 +657,8 @@ export function Markdown(
       className="markdown-body"
       style={{
         fontSize: `${props.fontSize ?? 16}px`,
-        fontFamily: props.fontFamily || "inherit"
+        fontFamily: props.fontFamily || "inherit",
+        wordBreak: "break-word"
       }}
       ref={mdRef}
       onContextMenu={props.onContextMenu}