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] 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. */