Skip to content

🐛 Change the copy-button position #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Banana-Master
Copy link

@Banana-Master Banana-Master commented May 23, 2025

🐛 Problem

When a horizontal scrollbar appeared inside <pre>, the copy button would shift out of position, as shown below:

image

This caused the copy button to move along with the scrollable content, making it hard to use or partially hidden.


✅ Solution

  • Wrapped the <pre> tag with a parent div.relative
  • Moved the .copy-button and .check-span outside of the scrollable <pre> block
  • Applied absolute positioning to the parent .relative wrapper to anchor the buttons properly

📦 Result

  • The copy button stays in the top-right corner, unaffected by horizontal scroll
  • The UX is consistent and visually clean across long code blocks

Let me know if you'd like any adjustments. Thanks for the awesome project!

Copy link

vercel bot commented May 23, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
blog-template ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 23, 2025 2:06pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant