From ab0a5aedd1d08aa113df28836a28cb0b04488282 Mon Sep 17 00:00:00 2001
From: Dmitrii Troitskii <jsleitor@gmail.com>
Date: Sat, 4 Apr 2026 02:35:10 +0000
Subject: [PATCH 1/2] fix(code-block): use absolute positioning for action
 buttons to fix click events in nested scroll containers

Switches the code block action button wrapper from position:sticky to
position:absolute (with position:relative on the container) so that
hit-testing works correctly in layouts with multiple nested overflow:auto
scroll containers.

Previously, the sticky + pointer-events-none/auto pattern caused browsers
to mis-route click events to the code block wrapper rather than the copy/
download buttons when embedded in 2+ nested scroll containers.

Closes #494
---
 .changeset/fix-code-block-buttons-absolute.md    | 13 +++++++++++++
 packages/streamdown/lib/code-block/container.tsx |  2 +-
 packages/streamdown/lib/code-block/index.tsx     |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fix-code-block-buttons-absolute.md

diff --git a/.changeset/fix-code-block-buttons-absolute.md b/.changeset/fix-code-block-buttons-absolute.md
new file mode 100644
index 00000000..d794d8b5
--- /dev/null
+++ b/.changeset/fix-code-block-buttons-absolute.md
@@ -0,0 +1,13 @@
+---
+"streamdown": patch
+---
+
+fix(code-block): use absolute positioning for action buttons to fix click events in nested scroll containers
+
+Switches the code block action button wrapper from `position: sticky` to
+`position: absolute` (with `position: relative` on the container) so that
+hit-testing works correctly in layouts with multiple nested `overflow: auto`
+scroll containers. Previously, the `sticky` + `pointer-events-none/auto`
+pattern caused browsers to mis-route click events to the code block wrapper
+rather than the buttons when the component was embedded in 2+ nested scroll
+containers.
diff --git a/packages/streamdown/lib/code-block/container.tsx b/packages/streamdown/lib/code-block/container.tsx
index 1d2a09dd..fbd32494 100644
--- a/packages/streamdown/lib/code-block/container.tsx
+++ b/packages/streamdown/lib/code-block/container.tsx
@@ -18,7 +18,7 @@ export const CodeBlockContainer = ({
   return (
     <div
       className={cn(
-        "my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2",
+        "relative my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2",
         className
       )}
       data-incomplete={isIncomplete || undefined}
diff --git a/packages/streamdown/lib/code-block/index.tsx b/packages/streamdown/lib/code-block/index.tsx
index b927c183..ff574fc7 100644
--- a/packages/streamdown/lib/code-block/index.tsx
+++ b/packages/streamdown/lib/code-block/index.tsx
@@ -70,7 +70,7 @@ export const CodeBlock = ({
         {children ? (
           <div
             className={cn(
-              "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end"
+              "pointer-events-none absolute top-2 right-2 z-10 flex items-center"
             )}
           >
             <div

From afbcf11b892ce7d64ac2c92694e2f116dcd85314 Mon Sep 17 00:00:00 2001
From: Dmitrii Troitskii <jsleitor@gmail.com>
Date: Mon, 4 May 2026 17:12:01 +0000
Subject: [PATCH 2/2] fix(mermaid): use absolute positioning for action buttons
 to fix clicks in nested scroll containers

Same fix as code-block (ab0a5ae): switches the mermaid block action button
wrapper from position:sticky to position:absolute so that hit-testing works
correctly in layouts with multiple nested overflow:auto scroll containers.

The mermaid block container already has position:relative, so only the
inner toolbar wrapper needed updating.

Fixes #494
---
 packages/streamdown/lib/components.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/streamdown/lib/components.tsx b/packages/streamdown/lib/components.tsx
index 2449ca3a..133ae8db 100644
--- a/packages/streamdown/lib/components.tsx
+++ b/packages/streamdown/lib/components.tsx
@@ -894,7 +894,7 @@ const CodeComponent = ({
           {shouldShowMermaidControls ? (
             <div
               className={cn(
-                "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end"
+                "pointer-events-none absolute top-2 right-2 z-10 flex items-center"
               )}
             >
               <div