From 8d99fd16fc79fbfa4ab298a0b6e761e4e87add57 Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sat, 15 Aug 2026 05:39:02 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=97=20fix:=20Keep=20Code=20Block=20Hea?= =?UTF-8?q?der=20Visible=20in=20User=20Messages=20(#14856)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Keep Code Block Chrome Visible on the User Message Bubble The code bar dropped its background in dark mode and inherited whatever sat behind it. That works on the chat background, but a user message bubble is surface-tertiary, which resolves to the same gray-700 as the code block's border-light outline, so both the header bar and the outline disappeared into the bubble and only the code body showed. Paint the bar with surface-secondary instead. It resolves to the same value as the old pair on the chat background (gray-50 in light, gray-800 in dark, matching the presentation background), so assistant messages are unchanged, while the bar keeps a surface of its own inside the bubble. The execution output panel used the same pattern and gets the same treatment. * fix: Derive the Code Block Surface So Custom Themes Keep Their Colors Painting the code bar with surface-secondary only reproduced the old appearance because the built-in themes happen to give surface-secondary, surface-primary-alt and presentation coinciding values. A custom theme sets those three independently, so the bar could shift on the chat background where nothing was meant to change. Add a surface-code role that derives from whatever the bar used to show: surface-primary-alt in light, where the bar was already opaque, and presentation in dark, which is exactly what the transparent bar inherited. Every theme therefore renders the bar as before on the chat background, while the bubble no longer bleeds through it. Give ResultSwitcher the same surface. It had no background of its own, so once the output panel above it gained one it became a detached band of bubble color, the same defect one element lower. * fix: Scope the Opaque Code Surface to User Message Bubbles CodeBar renders on more than the chat background. The terms dialog and the subagent panel put MarkdownLite on surface-dialog and surface-primary, and dark:bg-transparent was what let the bar sit on any of them. Painting it unconditionally gave those surfaces a header that contrasts with their own background. Restore the original declarations and scope the opaque role with a .user-turn ancestor selector, which MessageRow and SteerPart both already set, so every user bubble is covered without threading context through react-markdown. Outside a user bubble the classes are byte for byte what they were, so no other surface and no custom theme can drift. --- client/src/components/Messages/Content/CodeBar.tsx | 2 +- client/src/components/Messages/Content/CodeBlock.tsx | 2 +- client/src/components/Messages/Content/ResultSwitcher.tsx | 2 +- client/src/style.css | 2 ++ packages/client/src/theme/utils/createTailwindColors.js | 1 + 5 files changed, 6 insertions(+), 3 deletions(-) diff --git a/client/src/components/Messages/Content/CodeBar.tsx b/client/src/components/Messages/Content/CodeBar.tsx index 52c4060465..1d8b7465b6 100644 --- a/client/src/components/Messages/Content/CodeBar.tsx +++ b/client/src/components/Messages/Content/CodeBar.tsx @@ -13,7 +13,7 @@ const CodeBar: React.FC = React.memo( const { isCopied, handleCopy } = useCopyCode(codeRef); return ( -
+
{lang} diff --git a/client/src/components/Messages/Content/CodeBlock.tsx b/client/src/components/Messages/Content/CodeBlock.tsx index 1d1fe21b80..2b82a381bb 100644 --- a/client/src/components/Messages/Content/CodeBlock.tsx +++ b/client/src/components/Messages/Content/CodeBlock.tsx @@ -140,7 +140,7 @@ const CodeBlock: React.FC = ({ /> {allowExecution === true && toolCalls && toolCalls.length > 0 && ( <> -
+
{localize('com_ui_output')}
diff --git a/client/src/components/Messages/Content/ResultSwitcher.tsx b/client/src/components/Messages/Content/ResultSwitcher.tsx index ee67e9b11a..cd6b10c439 100644 --- a/client/src/components/Messages/Content/ResultSwitcher.tsx +++ b/client/src/components/Messages/Content/ResultSwitcher.tsx @@ -26,7 +26,7 @@ export default function ResultSwitcher({ return (