feat: make code block header action buttons sticky (copy/download) (#401)

* refactor: simplify CodeBlockHeader component by removing unused children prop

* fix: remove overflow-hidden class from CodeBlockContainer

* feat: add sticky button for code block actions

* fix: update selector for code block action buttons in tests

* feat: add sticky action buttons to code block header for improved accessibility

Author: aradhyacp

.changeset/happy-taxes-double.md

@@ -0,0 +1,7 @@
+---
+"streamdown": minor
+---
+
+Make the action buttons in code block header sticky.
+Ensures copy buttons remain accessible for long code blocks.
+Improves usability when viewing large snippets.

packages/streamdown/__tests__/show-controls.test.tsx

@@ -68,7 +68,7 @@ graph TD
       );
 
       const buttons = container.querySelectorAll(
-        '[data-streamdown="code-block-header"] button'
+        '[data-streamdown="code-block-actions"] button'
       );
 
       expect(buttons?.length).toBe(0);
@@ -108,7 +108,7 @@ graph TD
       );
 
       const buttons = container.querySelectorAll(
-        '[data-streamdown="code-block-header"] button'
+        '[data-streamdown="code-block-actions"] button'
       );
 
       expect(buttons?.length).toBe(0);
@@ -121,7 +121,7 @@ graph TD
 
       await waitFor(() => {
         const buttons = container.querySelectorAll(
-          '[data-streamdown="code-block-header"] button'
+          '[data-streamdown="code-block-actions"] button'
         );
         expect(buttons?.length).toBeGreaterThan(0);
       });
@@ -183,7 +183,7 @@ ${markdownWithCode}
 
       await waitFor(() => {
         const codeButtons = container.querySelectorAll(
-          '[data-streamdown="code-block-header"] button'
+          '[data-streamdown="code-block-actions"] button'
         );
         expect(codeButtons?.length).toBeGreaterThan(0);
       });
@@ -208,7 +208,7 @@ ${markdownWithCode}
       // Code controls should still show since not specified
       await waitFor(() => {
         const codeButtons = container.querySelectorAll(
-          '[data-streamdown="code-block-header"] button'
+          '[data-streamdown="code-block-actions"] button'
         );
         expect(codeButtons?.length).toBeGreaterThan(0);
       });

packages/streamdown/lib/code-block/container.tsx

@@ -16,7 +16,7 @@ export const CodeBlockContainer = ({
 }: CodeBlockContainerProps) => (
   <div
     className={cn(
-      "my-4 w-full overflow-hidden rounded-xl border border-border",
+      "my-4 w-full rounded-xl border border-border",
       className
     )}
     data-incomplete={isIncomplete || undefined}

packages/streamdown/lib/code-block/header.tsx

@@ -1,20 +1,13 @@
-import type { ReactNode } from "react";
-
 interface CodeBlockHeaderProps {
   language: string;
-  children: ReactNode;
 }
 
-export const CodeBlockHeader = ({
-  language,
-  children,
-}: CodeBlockHeaderProps) => (
+export const CodeBlockHeader = ({ language }: CodeBlockHeaderProps) => (
   <div
-    className="flex items-center justify-between bg-muted/80 p-3 text-muted-foreground text-xs"
+    className="flex h-12 items-center bg-muted/80 px-4 text-muted-foreground text-xs"
     data-language={language}
     data-streamdown="code-block-header"
   >
     <span className="ml-1 font-mono lowercase">{language}</span>
-    <div className="flex items-center gap-2">{children}</div>
   </div>
 );

packages/streamdown/lib/code-block/index.tsx

@@ -55,7 +55,17 @@ export const CodeBlock = ({
   return (
     <CodeBlockContext.Provider value={{ code }}>
       <CodeBlockContainer isIncomplete={isIncomplete} language={language}>
-        <CodeBlockHeader language={language}>{children}</CodeBlockHeader>
+        <CodeBlockHeader language={language} />
+        {children ? (
+          <div className="pointer-events-none sticky top-0 z-10 -mt-12 flex h-12 items-center justify-end px-4">
+            <div
+              className="pointer-events-auto flex shrink-0 items-center gap-2 rounded-md bg-muted/80 px-1.5 py-1 supports-[backdrop-filter]:bg-muted/70 supports-[backdrop-filter]:backdrop-blur"
+              data-streamdown="code-block-actions"
+            >
+              {children}
+            </div>
+          </div>
+        ) : null}
         <Suspense
           fallback={
             <CodeBlockBody