fix(code-block): use absolute positioning for action buttons to fix clicks in nested scroll containers by sleitor · Pull Request #498 · vercel/streamdown

sleitor · 2026-04-04T02:35:27Z

Problem

When streamdown is embedded in a layout with two or more nested scroll containers (e.g., an outer overflow-auto sidebar + an inner overflow-auto chat scroll area), the code block copy/download buttons are visible but unclickable.

The root cause: the sticky + pointer-events-none/auto pattern for the action button wrapper causes browser hit-testing to resolve clicks to the code block container div instead of reaching the buttons when there are multiple overflow: auto ancestors.

Fixes #494

Solution

Switch the action button wrapper from position: sticky to position: absolute with top-2 right-2
Add position: relative to the CodeBlockContainer so absolute positioning is scoped to the code block

This makes buttons reliably clickable in all scroll-container configurations.

Trade-off: Buttons no longer scroll with long code blocks (they stay fixed at the top-right of the code block). This is the same behavior as the workaround documented in the issue, and arguably cleaner UX — the buttons are always visible and always reachable.

Changes

packages/streamdown/lib/code-block/container.tsx: add relative class
packages/streamdown/lib/code-block/index.tsx: change outer wrapper from pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end to pointer-events-none absolute top-2 right-2 z-10 flex items-center
.changeset/fix-code-block-buttons-absolute.md: patch changeset

Testing

All 982 existing tests pass (pnpm --filter streamdown test). Biome check clean.

…lick 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 vercel#494

vercel · 2026-04-04T02:35:31Z

@sleitor is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

vercel

Additional Suggestion:

Mermaid block action buttons use sticky positioning that causes click event issues in nested scroll containers, identical to the bug fixed in code blocks.

manjujidagi · 2026-05-04T11:15:10Z

@sleitor Can you update the vercel (bot) suggested changes, as 'mermaid' also has similar issue

…ks 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 vercel#494

sleitor · 2026-05-04T17:12:08Z

@manjujidagi Good catch! The Mermaid block action buttons (download/copy/fullscreen toolbar) had the same sticky positioning issue. Extended the fix in commit afbcf11 — changed the toolbar wrapper from sticky top-2 -mt-10 to absolute top-2 right-2 (the mermaid block container already has position:relative).

manjujidagi · 2026-05-04T17:30:40Z

@sleitor When do you think this will be merged ? I am waiting for this update

sleitor · 2026-05-05T17:03:49Z

@manjujidagi The fix is ready — the remaining blocker is Vercel team authorization for the deployment preview (the standard bot checkpoint for external contributors). Merge timeline is up to the Vercel/streamdown maintainers, but I'll continue to follow up with them. Thanks for your patience!

farnabaz · 2026-08-12T14:36:02Z

Hey @sleitor, Thanks for the PR
Although that the changes looks good to me, I could not reproduce the issue, do you mind providing a simple reproduction project?

sleitor · 2026-08-30T17:11:14Z

Hey @farnabaz, thanks for taking a look! Here's a minimal standalone HTML reproduction (no build step needed — just save and open in a browser, or paste into a local static server):

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Streamdown nested-scroll button repro</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
    html, body { margin: 0; height: 100%; font-family: sans-serif; }
    .sidebar-layout { display: flex; height: 100vh; }
    .sidebar { width: 220px; overflow: auto; background: #f3f3f3; border-right: 1px solid #ddd; }
    .sidebar-item { padding: 12px; border-bottom: 1px solid #ddd; }
    .chat-scroll { flex: 1; overflow: auto; padding: 16px; }
    /* Reproduces streamdown's pre-fix sticky+pointer-events pattern */
    .code-block { position: static; margin: 16px 0; border: 1px solid #ccc; border-radius: 6px; }
    .code-actions-wrapper {
      pointer-events: none;
      position: sticky;
      top: 8px;
      z-index: 10;
      margin-top: -40px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .code-actions { pointer-events: auto; }
    .code-actions button { padding: 6px 10px; cursor: pointer; }
    .code-body { overflow-x: auto; padding: 12px; background: #1e1e1e; color: #eee; }
    pre { margin: 0; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState } = React;

    function CodeBlock() {
      const [clicks, setClicks] = useState(0);
      return (
        <div className="code-block" data-streamdown="code-block">
          <div className="code-actions-wrapper">
            <div className="code-actions" data-streamdown="code-block-actions">
              <button onClick={() => setClicks((c) => c + 1)}>
                Copy (clicked {clicks}x)
              </button>
            </div>
          </div>
          <div className="code-body">
            <pre>{`function example() {\n  return "hello world";\n}`}</pre>
          </div>
        </div>
      );
    }

    function App() {
      const rows = Array.from({ length: 60 }, (_, i) => i);
      return (
        <div className="sidebar-layout">
          <div className="sidebar">
            {rows.map((i) => (
              <div className="sidebar-item" key={i}>Sidebar item {i}</div>
            ))}
          </div>
          <div className="chat-scroll">
            <p>Click "Copy" below — with two nested overflow:auto ancestors (sidebar + this chat-scroll area), the click doesn't reach the button; DevTools "select element" over it selects the code-block wrapper div instead.</p>
            <CodeBlock />
            {rows.map((i) => (
              <p key={i}>Filler paragraph {i}.</p>
            ))}
          </div>
        </div>
      );
    }

    ReactDOM.createRoot(document.getElementById("root")).render(<App />);
  </script>
</body>
</html>

Steps:

Save as repro.html, open in browser (or serve with python3 -m http.server).
Click the "Copy (clicked 0x)" button.
On main/pre-fix CSS (sticky + pointer-events split as above), the click count does not increment — the click is swallowed by the ancestor's hit-testing due to the two nested overflow: auto containers.
Applying this PR's fix (position: absolute + relative on the container, replacing sticky + -mt-40 offset) makes the button reliably clickable in the same layout.

This mirrors exactly the CSS pattern from #494 (pointer-events-none sticky ... -mt-10 wrapper / pointer-events-auto inner div), just without the streamdown build. Happy to also wire up an actual <Streamdown> repro in a sandbox if that's more useful — let me know!

farnabaz · 2026-08-31T16:41:39Z

Thanks for reproduction @sleitor, but I still didn't get it. Checkout quick video below. What did I miss? (I did test with chrome and firefox too, but they all were same)

Screen.Recording.2026-08-31.at.18.38.35.mov

sleitor · 2026-08-31T17:04:49Z

Hey @farnabaz — thanks for testing it out! Sorry the standalone HTML repro didn't click for you.

A couple of things that could explain why it works fine in your test:

DevTools open changes viewport metrics — if DevTools was docked while recording, that can shrink the viewport enough that the "two nested overflow:auto" scroll condition never actually triggers (e.g., the inner pane no longer needs to scroll, or the sticky element never leaves the containing block in the way that breaks hit-testing).
Zoom/DPI — the sticky mis-hit-testing bug is somewhat viewport-size/zoom dependent in Chromium; at 100% zoom with DevTools closed it reproduces consistently for me, but toggling zoom can make it disappear.
It's possible my hand-rolled CSS repro missed some detail of the real component tree (e.g., content-visibility: auto stacking context interactions, or the exact ancestor chain used by use-stick-to-bottom).

Rather than iterate on more guesses, let me build an actual <Streamdown>-based sandbox (real package, not hand-rolled CSS) so we're testing the literal component in the exact nested-scroll layout from #494 — I'll follow up with a CodeSandbox/StackBlitz link shortly. In the meantime, could you share:

Browser + OS you tested in
Whether DevTools was open/docked during the recording
Viewport size / zoom level

That'll help me nail an exact match. Appreciate your patience on this one!

vercel Bot reviewed Apr 4, 2026

View reviewed changes

farnabaz added the pending reproduction Issues or pull requests that are pending while we wait for a reproduction. label Aug 12, 2026

Navigation Menu

Uh oh!

fix(code-block): use absolute positioning for action buttons to fix clicks in nested scroll containers - #498

fix(code-block): use absolute positioning for action buttons to fix clicks in nested scroll containers#498
sleitor wants to merge 2 commits into
vercel:mainfrom
sleitor:fix-494

sleitor commented Apr 4, 2026

Uh oh!

vercel Bot commented Apr 4, 2026

Uh oh!

vercel Bot left a comment

Uh oh!

manjujidagi commented May 4, 2026

Uh oh!

sleitor commented May 4, 2026

Uh oh!

manjujidagi commented May 4, 2026

Uh oh!

sleitor commented May 5, 2026

Uh oh!

farnabaz commented Aug 12, 2026

Uh oh!

sleitor commented Aug 30, 2026

Uh oh!

farnabaz commented Aug 31, 2026

Uh oh!

sleitor commented Aug 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

sleitor commented Apr 4, 2026

Problem

Solution

Changes

Testing

Uh oh!

vercel Bot commented Apr 4, 2026

Uh oh!

vercel Bot left a comment

Choose a reason for hiding this comment

Uh oh!

manjujidagi commented May 4, 2026

Uh oh!

sleitor commented May 4, 2026

Uh oh!

manjujidagi commented May 4, 2026

Uh oh!

sleitor commented May 5, 2026

Uh oh!

farnabaz commented Aug 12, 2026

Uh oh!

sleitor commented Aug 30, 2026

Uh oh!

farnabaz commented Aug 31, 2026

Uh oh!

sleitor commented Aug 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants