ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

studio/frontend: merge code-block CSS rules per gemini #5629 review

Browse source 
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.
This commit is contained in:
danielhanchen 2026-05-19 17:35:25 +00:00
commit 74b1fa7513
1 changed files with 11 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

24
studio/frontend/src/index.css
View file

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