Fix copy button hidden behind codebox on brand page

[Copilot]

The copy button was position: absolute but rendered as a preceding sibling of <pre class="codebox">, causing the pre (later in DOM order, same stacking context) to paint over it. Additionally, the button had a transparent background, making it unreadable when overlapping code text.

Changes

• brand.html — Moved <button class="copy-btn"> into a new <div class="codebox-wrapper"> that wraps the <pre class="codebox">. This keeps the button outside the scrollable <pre> so it stays pinned in the top-right corner even when code content overflows horizontally.
• brand.css — Added .codebox-wrapper rule with position: relative, max-width, and margin (previously on a duplicate pre.codebox rule). Removed position: relative from pre.codebox. Changed .copy-btn background from transparent to var(--card-bg) so it is always readable against code text in both light and dark themes. Added cursor: pointer and z-index: 1. Removed the now-redundant "center codebox" pre.codebox rule and consolidated text-align: left into the single pre.codebox block.

<!-- Before: button is sibling before pre, gets painted over, no background -->
<div style="position: relative">
  <button class="copy-btn" id="copyBtn">Copy</button>
  <pre class="codebox" id="codeBox">…</pre>
</div>

<!-- After: button is sibling of pre inside a positioned wrapper, solid background -->
<div class="codebox-wrapper">
  <button class="copy-btn" id="copyBtn" aria-label="Copy embed code">
    Copy
  </button>
  <pre class="codebox" id="codeBox" aria-live="polite"><code id="codeContent"></code></pre>
</div>

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Bug: Copy button on brand page is barely visible.</issue_title>
<issue_description>There is a bug on the brand page where the copy button for the brand assets is hidden behind the codebox, making it hard to click and low visibility.

</issue_description>

<agent_instructions>Please address the current issue, when moving the button place it in a place that would feel natural for the page following all current style guidelines for the project. Make sure to confirm nothing else was broken or changed in the process of moving the button</agent_instructions>

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

• Fixes Bug: Copy button on brand page is barely visible. #28

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[deepsource-io]

DeepSource Code Review

We reviewed changes in 4a11e27...4c69cb0 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
Secrets		Mar 20, 2026 6:00p.m.	Review ↗
Shell		Mar 20, 2026 6:00p.m.	Review ↗
JavaScript		Mar 20, 2026 6:00p.m.	Review ↗

[cloudflare-workers-and-pages]

Deploying kvgrow with    Cloudflare Pages

Latest commit:	4c69cb0
Status:	✅  Deploy successful!
Preview URL:	https://667226d1.kvgrow.pages.dev
Branch Preview URL:	https://copilot-fix-copy-button-visi.kvgrow.pages.dev

View logs

[Copilot]

Pull request overview

This PR aims to fix the “Copy” button visibility/clickability on brand.html’s badge embed code box by adjusting its DOM placement and stacking/cursor styling so it appears above the codebox content.

Changes:

• Moved the copy button into the <pre class="codebox"> element and removed the previously used positioned wrapper.
• Updated .copy-btn styling to add cursor: pointer and z-index: 1.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
brand.html	Moves the copy button into the codebox <pre> and removes the wrapper around the codebox.
brand.css	Adds cursor + z-index to ensure the copy button is clickable and stacks above code content.

[kiyarose]

Copy button does not have a background, and as thus, on top of the text.
This is an accessibility issue.

[Copilot]

Copy button does not have a background, and as thus, on top of the tex...

Fixed in d392f0a. The button now has background: var(--card-bg) (previously transparent), so it always renders with a solid fill matching the page card background in both light and dark themes. The button was also moved outside the <pre> into a positioned wrapper (div.codebox-wrapper) so it won't scroll with the code content.

Light theme:

The button now sits clearly above the codebox with a solid background in both themes.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud