fix(ui): prevent copy button overlap with language label in code blocks (#2533)

## Summary - Fixed UI element occlusion bug where the "Copy" utility button was unusable due to layout overlap with the language identifier label in code blocks - Added flexbox properties (gap, items-center, truncate, min-w-0, flex-shrink-0) to ensure proper spacing and prevent overflow ## Test plan - Open a chat with code blocks containing language labels (e.g., typescript, javascript) - Verify the language label and copy button no longer overlap - Test with narrow window widths to ensure the layout remains correct - Click the copy button to confirm it's clickable and functional Fixes #2466 🤖 Generated with [Claude Code](https://claude.com/claude-code)  --- <a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2533" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1"> <img src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1" alt="Open with Devin"> </picture> </a>   --- ## Summary by cubic Fixes an overlap in code blocks where the Copy button covered the language label, so the button stays visible and clickable at all widths. Fixes #2466. - **Bug Fixes** - Aligned header padding with pre (left/right 0, px-6) and added gap-2/items-center for spacing. - Applied truncate and min-w-0 to the language label to prevent overflow. - Set the Copy button to flex-shrink-0 to avoid shrinking. <sup>Written for commit 246b0df6569b41f813f0843b048125da8efe9830. Summary will update on new commits.</sup>  --------- Co-authored-by: Will Chen <willchen90@gmail.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com> Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>

fix(ui): prevent copy button overlap with language label in code blocks (#2533)
2d0ebcf9 · wwwillchen-bot · GitHub · 955e587c · 2d0ebcf9
--- a/src/components/chat/CodeHighlight.tsx
+++ b/src/components/chat/CodeHighlight.tsx
@@ -101,29 +101,30 @@ export const CodeHighlight = memo(
        className="shiki not-prose relative [&_pre]:overflow-auto 
      [&_pre]:rounded-lg [&_pre]:px-6 [&_pre]:py-7"
      >
-        {language ? (
+        {code && (
-          <div className="absolute top-2 left-2 right-2 text-xs flex justify-between">
+          <div className="absolute top-2 left-0 right-0 px-6 text-xs z-10 flex items-center justify-between">
-            <span className="tracking-tighter text-muted-foreground/85">
+            {language && (
-              {language}
+              <span className="tracking-tighter text-muted-foreground/85 truncate min-w-0">
-            </span>
+                {language}
-            {code && (
+              </span>
-              <button
-                className="mr-2 flex items-center text-xs cursor-pointer"
-                onClick={handleCopy}
-                type="button"
-              >
-                {copied ? <Check size={14} /> : <Copy size={14} />}
-                <span className="ml-1">{copied ? "Copied" : "Copy"}</span>
-              </button>
            )}
+            <button
+              className="flex items-center text-xs cursor-pointer ml-auto flex-shrink-0"
+              onClick={handleCopy}
+              type="button"
+            >
+              {copied ? <Check size={14} /> : <Copy size={14} />}
+              <span className="ml-1">{copied ? "Copied" : "Copy"}</span>
+            </button>
          </div>
-        ) : null}
+        )}
        {highlighter ? (
          <ShikiHighlighter
            highlighter={highlighter}
            language={language}
            theme={isDarkMode ? "github-dark-default" : "github-light-default"}
            delay={150}
+            showLanguage={false}
          >
            {code}
          </ShikiHighlighter>