Fix code block buttons overlapping content

[pwizla]

This PR fixes all use cases where the Copy, Wrap, and Ask AI buttons were overlapping the content of code blocks, preventing users from reading the code.

Here's the new behavior:

• on mobile, buttons are always visible, and a top padding is added to any code block, so we can place the buttons on top of the code, aligned on left
• on larger viewports, buttons only appear when hovering the code block, plus:
  • either the code block has a title, and buttons are moved to the title bar
  • or the code block does not have a title, and buttons appear at the top right of the code block content

Demo 👇

Screen.Recording.2025-10-21.at.17.31.53.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
documentation	Ready	Preview	Comment	Oct 21, 2025 3:33pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews