BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chat): align code block actions and restore horizontal scrolling across desktop and mobile (#564)

Browse Source 
* fix(chat): use streamdown code controls for markdown blocks

* fix(chat): keep code block actions in header row and body scrollable

* fix(chat): allow horizontal scrolling in virtualized code output

* fix(chat): preserve mobile horizontal scrolling in code blocks

* fix: refine chat code block header and actions styling

* fix: restore themed code highlighting and polish chat code blocks

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Nelson Pires
2026-03-01 15:54:02 +02:00
committed by GitHub
co-authored by Bohdan Triapitsyn
parent 655b5ba823
commit 73e533a315
4 changed files with 173 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/index.css
+135 -3
View File
@@ -825,12 +825,28 @@ html:not(.dark) .chat-scroll {
/* Streamdown code blocks: ensure light/dark Shiki vars work even when Tailwind doesn't scan Streamdown's internal class names. */
.streamdown-content [data-streamdown="code-block-body"] {
font-size: var(--text-code);
background-color: var(--shiki-light-bg, transparent);
background-color: transparent;
color: var(--shiki-light, inherit);
}
.streamdown-content [data-streamdown="code-block-body"] span[style*="--sdm-c"] {
color: var(--sdm-c) !important;
}
.streamdown-content [data-streamdown="code-block-body"] span[style*="--sdm-tbg"] {
background-color: var(--sdm-tbg) !important;
}
.streamdown-content [data-streamdown="code-block-body"] span[style*="--shiki-light"] {
color: var(--shiki-light) !important;
}
.streamdown-content [data-streamdown="code-block-body"] span[style*="--shiki-light-bg"] {
background-color: var(--shiki-light-bg) !important;
}
.dark .streamdown-content [data-streamdown="code-block-body"] {
background-color: var(--shiki-dark-bg, var(--shiki-light-bg, transparent));
background-color: transparent;
color: var(--shiki-dark, var(--shiki-light, inherit));
}
@@ -838,6 +854,10 @@ html:not(.dark) .chat-scroll {
color: var(--shiki-dark) !important;
}
.dark .streamdown-content [data-streamdown="code-block-body"] span[style*="--shiki-dark-bg"] {
background-color: var(--shiki-dark-bg) !important;
}
/* Fix list styling - override Tailwind reset */
.streamdown-content ul {
list-style-type: disc;
@@ -857,13 +877,125 @@ html:not(.dark) .chat-scroll {
/* Reduce code block header height */
[data-streamdown="code-block-header"] {
margin: 0;
padding: 0.375rem 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-right: 5.25rem;
border: 0;
border-bottom: 1px solid var(--interactive-border);
border-radius: 0;
background: var(--surface-muted);
}
/* Disable Streamdown's code block virtualization (content-visibility) to avoid late height changes that break scroll-to-bottom. */
/* Disable Streamdown's code block virtualization and keep block chrome fixed */
.streamdown-content [data-streamdown="code-block"] {
content-visibility: visible !important;
contain-intrinsic-size: none !important;
position: relative;
display: flex;
flex-direction: column;
padding: 0 !important;
box-sizing: border-box;
inline-size: 100%;
max-inline-size: 100%;
min-inline-size: 0;
overflow: hidden;
background: var(--surface-background);
border: 1px solid var(--interactive-border);
border-radius: 0.75rem;
}
.streamdown-content [data-streamdown="code-block"] > div:not([data-streamdown]) {
position: absolute;
top: 0;
right: 0;
margin-top: 0;
height: 2rem;
z-index: 6;
pointer-events: none;
}
/* Streamdown code block body: scroll text content within the card body */
.streamdown-content [data-streamdown="code-block-body"] {
display: block;
inline-size: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
scrollbar-gutter: stable;
background: transparent;
border: 0;
border-radius: 0;
}
.streamdown-content [data-streamdown="code-block-body"] pre {
display: block;
width: 100%;
min-width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0.75rem !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.streamdown-content [data-streamdown="code-block-body"] > * {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.streamdown-content [data-streamdown="code-block-body"] code {
white-space: pre;
overflow-wrap: normal;
word-break: normal;
background: transparent !important;
}
.streamdown-content [data-streamdown="code-block-actions"] {
pointer-events: auto;
transition: opacity 0.15s ease;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
gap: 0.125rem;
}
.streamdown-content [data-streamdown="code-block-actions"] button {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0.25rem !important;
min-width: 1.5rem;
min-height: 1.5rem;
}
.streamdown-content [data-streamdown="code-block-actions"] button svg {
width: 0.875rem;
height: 0.875rem;
}
@media (hover: hover) and (pointer: fine) {
.streamdown-content [data-streamdown="code-block"] [data-streamdown="code-block-actions"] {
opacity: 0;
pointer-events: none;
}
.streamdown-content [data-streamdown="code-block"]:hover [data-streamdown="code-block-actions"],
.streamdown-content [data-streamdown="code-block"]:focus-within [data-streamdown="code-block-actions"] {
opacity: 1;
pointer-events: auto;
}
}
/* Mermaid block: position context for controls wrapper. */