💄 style(highlighter): make code block header sticky with copy button

[Innei]

Summary

• Change root overflow: hidden to overflow: clip to allow sticky-positioned children to escape the clipping container
• Make code block header position: sticky; top: 0 so the copy button stays visible when scrolling through long code blocks
• Add container background to header for proper sticky rendering (content doesn't show through)

Related

• Fixes [Request] Difficult to copy code when code block is too long lobehub#6764 (difficult to copy long code blocks)
• Fixes [Request] Suggested to add a copy button and a floating run button, which would be super friendly for working with code lobehub#7129 (floating copy/run button for code blocks)

Test plan

• Open a chat with a long code block, scroll down - copy button should remain visible at top
• Code block border-radius clipping should still work correctly
• Expand/collapse toggle should still work

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
lobe-ui	Ignored	Preview	May 19, 2026 0:39am

[sourcery-ai]

We've reviewed this pull request using the Sourcery rules engine

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e0c53909a5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Add opaque background to all sticky header variants

Making headerRoot sticky applies to every highlighter variant, but only headerFilled now gets an explicit background. In fullFeatured mode with variant="outlined" or variant="borderless", scrolling long code blocks causes code text to move underneath a transparent sticky header, which reduces readability and can make action buttons hard to see. Since this behavior is introduced by the new sticky positioning, the header should use an opaque background for the non-filled variants as well.

Useful? React with 👍 / 👎.