From 2dc1a8c163cffbc4552eebeb987433f1c21c3d3a Mon Sep 17 00:00:00 2001
From: morgmart <98432065+morgmart@users.noreply.github.com>
Date: Wed, 6 May 2026 15:32:44 -0700
Subject: [PATCH] Refine chat code block styling

Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>
---
 ui/goose2/src/shared/styles/globals.css       | 62 +++++++++++++++++--
 .../src/shared/ui/ai-elements/code-block.tsx  | 29 ++++-----
 2 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/ui/goose2/src/shared/styles/globals.css b/ui/goose2/src/shared/styles/globals.css
index caa4d21518..da6e7d1514 100644
--- a/ui/goose2/src/shared/styles/globals.css
+++ b/ui/goose2/src/shared/styles/globals.css
@@ -813,31 +813,85 @@ body,
 }
 
 [data-streamdown="table-wrapper"],
-[data-streamdown="code-block"],
 [data-streamdown="mermaid-block"] {
   border: none;
 }
 
-/* Doubled attribute selector bumps specificity above Tailwind's `flex` class
-   (0,2,0 vs 0,1,0) so grid wins regardless of source order. */
 [data-streamdown="code-block"][data-streamdown] {
   display: grid;
   grid-template-columns: 1fr auto;
+  gap: 0.25rem 0.5rem;
+  padding: 0.125rem;
+  overflow: visible;
+  border: none;
+  background: transparent;
+  contain: none !important;
+  contain-intrinsic-size: none !important;
+  content-visibility: visible !important;
 }
 
 [data-streamdown="code-block"] > [data-streamdown="code-block-header"] {
   grid-column: 1;
+  align-items: flex-end;
+  min-height: 1.75rem;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1rem;
 }
 
 [data-streamdown="code-block"]
   > [data-streamdown="code-block-header"]
   + div:has([data-streamdown="code-block-actions"]) {
+  position: static;
+  top: auto;
+  z-index: auto;
   grid-column: 2;
+  align-items: flex-end;
+  height: auto;
+  min-height: 1.75rem;
   margin-top: 0;
+  pointer-events: auto;
 }
 
-[data-streamdown="code-block"] > :last-child {
+[data-streamdown="code-block-actions"] {
+  gap: 0.25rem;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-streamdown="code-block-actions"] button {
+  padding: 0.1875rem;
+}
+
+[data-streamdown="code-block-actions"] svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-streamdown="code-block"] > [data-streamdown="code-block-body"] {
   grid-column: 1 / -1;
+  padding: 0.75rem;
+  border-color: var(--border-soft);
+  border-radius: 0.625rem;
+  background: var(--background-default);
+  font-size: 13px;
+  line-height: 1.25rem;
+}
+
+[data-streamdown="code-block"] > [data-streamdown="code-block-body"] pre {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+[data-streamdown="code-block"]
+  > [data-streamdown="code-block-body"]
+  code
+  > span::before {
+  width: 1rem;
+  margin-right: 0.5rem;
+  font-size: 12px;
+  text-align: left;
 }
 
 /* ═══════════════════════════════════════════════════════════
diff --git a/ui/goose2/src/shared/ui/ai-elements/code-block.tsx b/ui/goose2/src/shared/ui/ai-elements/code-block.tsx
index 01c675a2e5..5ad875e2ea 100644
--- a/ui/goose2/src/shared/ui/ai-elements/code-block.tsx
+++ b/ui/goose2/src/shared/ui/ai-elements/code-block.tsx
@@ -90,9 +90,10 @@ const LINE_NUMBER_CLASSES = cn(
   "before:content-[counter(line)]",
   "before:inline-block",
   "before:[counter-increment:line]",
-  "before:w-8",
-  "before:mr-4",
-  "before:text-right",
+  "before:w-4",
+  "before:mr-2",
+  "before:text-left",
+  "before:text-[12px]",
   "before:text-muted-foreground/50",
   "before:font-mono",
   "before:select-none",
@@ -331,15 +332,11 @@ export const CodeBlockContainer = ({
 }: HTMLAttributes<HTMLDivElement> & { language: string }) => (
   <div
     className={cn(
-      "group relative w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-border-soft bg-background-alt/50 text-foreground",
+      "group relative w-full min-w-0 max-w-full overflow-visible bg-transparent text-foreground",
       className,
     )}
     data-language={language}
-    style={{
-      containIntrinsicSize: "auto 200px",
-      contentVisibility: "auto",
-      ...style,
-    }}
+    style={style}
     {...props}
   />
 );
@@ -351,7 +348,7 @@ export const CodeBlockHeader = ({
 }: HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex min-h-8 items-center justify-between border-border-soft border-b bg-transparent px-3 py-1.5 text-muted-foreground text-xs",
+      "flex min-h-7 items-end justify-between bg-transparent px-0 py-0 text-[11px] text-muted-foreground leading-4",
       className,
     )}
     {...props}
@@ -365,7 +362,7 @@ export const CodeBlockTitle = ({
   className,
   ...props
 }: HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex items-center gap-2", className)} {...props}>
+  <div className={cn("flex items-end gap-2", className)} {...props}>
     {children}
   </div>
 );
@@ -385,10 +382,7 @@ export const CodeBlockActions = ({
   className,
   ...props
 }: HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("-my-1 -mr-0.5 flex items-center gap-1", className)}
-    {...props}
-  >
+  <div className={cn("flex items-end gap-1", className)} {...props}>
     {children}
   </div>
 );
@@ -447,7 +441,8 @@ export const CodeBlockContent = ({
   return (
     <div
       className={cn(
-        "relative min-w-0 max-w-full overflow-auto",
+        "relative min-w-0 max-w-full overflow-auto rounded-[0.625rem]",
+        !transparentBackground && "border border-border-soft bg-background",
         viewportClassName,
       )}
     >
@@ -547,7 +542,7 @@ export const CodeBlockCopyButton = ({
       variant="ghost"
       {...props}
     >
-      {children ?? <Icon size={14} />}
+      {children ?? <Icon size={12} />}
     </Button>
   );
 };