From a3b3ce6a6c434deff4ad547a76ebb44a8e117b57 Mon Sep 17 00:00:00 2001
From: danielhanchen <michaelhan2050@gmail.com>
Date: Tue, 19 May 2026 17:10:40 +0000
Subject: [PATCH 1/2] studio/frontend: scroll long lines inside code blocks
 instead of overflowing

Cycle-33 probe (`scripts/r6_code_block_wrap_probe.py`) renders an
assistant message with four code fences containing unbreakable runs:
a 200-char hex string, a single-line curl with many flags, a JSON
value holding a long URL, and a 300-char ascii blob. All four blocks
measure with `overflow-x: visible`, `white-space: pre`, `word-break:
normal` -- streamdown's default <pre> styling -- so content escapes
the bubble laterally and reflows the chat column instead of staying
contained.

Three of the four blocks had scrollWidth > 2x clientWidth (1696,
2177, 2447 px inside a 710 px column).

Add two scoped rules in `index.css` alongside the existing
streamdown hardening section:

  - The inner `<pre>` switches to `overflow-x: auto` so a horizontal
    scrollbar appears on the code block itself.
  - The outer `[data-streamdown="code-block"]` wrapper gets
    `max-width: 100%; overflow-x: hidden` so any residual leak can't
    widen the bubble even if a downstream library tweak undoes the
    pre styling.

Code indentation is preserved (no wrap), the scrollbar appears only
when needed, and the rest of the chat column layout stays put.
---
 studio/frontend/src/index.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index 8f132cd95b..791bd749b9 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -994,6 +994,22 @@
 	.aui-thread-root [data-streamdown="code-block"] [data-sd-animate] {
 		animation: none !important;
 	}
+
+	/* Long lines inside fenced code blocks should scroll horizontally
+	 * within the block, not push the chat column wider. Streamdown's
+	 * default <pre> ships with `overflow-x: visible` + `white-space:
+	 * pre` + `word-break: normal`, so an unbreakable run (long URL,
+	 * hex string, single-line curl command) escapes the bubble to the
+	 * right and reflows the message column. Switch the inner <pre> to
+	 * `overflow-x: auto` so the scrollbar appears on the code block
+	 * itself; the parent stays clipped so it cannot widen the bubble. */
+	.aui-thread-root [data-streamdown="code-block"] pre {
+		overflow-x: auto;
+	}
+	.aui-thread-root [data-streamdown="code-block"] {
+		max-width: 100%;
+		overflow-x: hidden;
+	}
 }
 
 /* Lighter shadow + tighter vertical padding than Sonner's defaults; !important because Sonner injects its base rules at runtime. */

From 74b1fa7513f00bd7266f2b1ae7c0e855c8c3374e Mon Sep 17 00:00:00 2001
From: danielhanchen <michaelhan2050@gmail.com>
Date: Tue, 19 May 2026 17:35:25 +0000
Subject: [PATCH 2/2] studio/frontend: merge code-block CSS rules per gemini
 #5629 review

Gemini medium-priority review on #5629 suggested folding the two
`[data-streamdown="code-block"]` rules into one selector block so the
applied styles are visible in one place. Move `max-width: 100%` +
`overflow-x: hidden` into the existing
`content-visibility / contain-intrinsic-size` rule alongside the
explanatory comment, keeping the inner `<pre>` overflow-x rule next to
it for readability. No specificity / !important changes.
---
 studio/frontend/src/index.css | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index 791bd749b9..354e741651 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -990,26 +990,24 @@
 	.aui-thread-root [data-streamdown="code-block"] {
 		content-visibility: visible !important;
 		contain-intrinsic-size: none !important;
+		/* Long lines inside fenced code blocks should scroll
+		 * horizontally within the block, not push the chat column
+		 * wider. Streamdown's default <pre> ships with
+		 * `overflow-x: visible` + `white-space: pre` +
+		 * `word-break: normal`, so an unbreakable run (long URL,
+		 * hex string, single-line curl command) escapes the
+		 * bubble to the right and reflows the message column.
+		 * Cap the wrapper width and clip overflow so the scrollbar
+		 * appears on the inner <pre> below. */
+		max-width: 100%;
+		overflow-x: hidden;
 	}
 	.aui-thread-root [data-streamdown="code-block"] [data-sd-animate] {
 		animation: none !important;
 	}
-
-	/* Long lines inside fenced code blocks should scroll horizontally
-	 * within the block, not push the chat column wider. Streamdown's
-	 * default <pre> ships with `overflow-x: visible` + `white-space:
-	 * pre` + `word-break: normal`, so an unbreakable run (long URL,
-	 * hex string, single-line curl command) escapes the bubble to the
-	 * right and reflows the message column. Switch the inner <pre> to
-	 * `overflow-x: auto` so the scrollbar appears on the code block
-	 * itself; the parent stays clipped so it cannot widen the bubble. */
 	.aui-thread-root [data-streamdown="code-block"] pre {
 		overflow-x: auto;
 	}
-	.aui-thread-root [data-streamdown="code-block"] {
-		max-width: 100%;
-		overflow-x: hidden;
-	}
 }
 
 /* Lighter shadow + tighter vertical padding than Sonner's defaults; !important because Sonner injects its base rules at runtime. */