Fix copy button overlapping code and scrolling on small screens

[Copilot]

The copy button was appended inside pre.highlight, which sits inside the horizontally-scrollable div.highlight wrapper — causing it to overlap code on narrow viewports and scroll with the content when swiping right.

Changes

• assets/copy-code.js — append button to div.highlighter-rouge (non-scrollable outer container) instead of pre.highlight
• assets/index.css — add position: relative to div.highlighter-rouge as the new stacking context; move button selector from pre.highlight > button → div.highlighter-rouge > button; change position to bottom-right; remove mx-4 margins that were causing leftward drift; drop position: relative from pre.highlight
• dist/style.*.css — compiled output updated to match

/* before: button inside scrollable pre, top-right with margin drift */
pre.highlight { position: relative; }
pre.highlight > button { position: absolute; top: .25rem; right: .25rem; margin: 0 1rem; }

/* after: button anchored to outer non-scrollable container, bottom-right */
div.highlighter-rouge { position: relative; }
div.highlighter-rouge > button { position: absolute; bottom: .25rem; right: .25rem; }

Original prompt

---

This section details on the original issue you should resolve

<issue_title>The copy code button is overlapping the code on smaller screens. </issue_title>
<issue_description>With the newly added copy code button a new bug was introduced where said button overlaps the actual code example. As you can see in the attached image.

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes The copy code button is overlapping the code on smaller screens.  #40

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[DannyvdSluijs]

@copilot On a small screen (iPhone SE for example) the copy button remains overlapping, see attached image

Also the copy button moves when scrolling to the right.

[Copilot]

@copilot On a small screen (iPhone SE for example) the copy button remains overlapping, see attached image
<img width="298" height="124" alt="Screenshot 2026-03-08 at 18 22 23" src=...

Fixed in commit 3d4196e. The root cause was that the button was appended inside pre.highlight, which lives inside the horizontally-scrollable div.highlight wrapper — so the button scrolled along with the code and continued to overlap it.

The fix moves the button to the outer div.highlighter-rouge container (which is not scrollable), so it always stays pinned to the top-right corner of the code block regardless of horizontal scrolling or screen size. CSS changes:

• position: relative added to div.highlighter-rouge (positioning context for the button)
• CSS selector changed from pre.highlight > button → div.highlighter-rouge > button
• Removed the now-unnecessary padding-right and position: relative from pre.highlight