[UI] Fix copy button shift on click and add checkmark confirmation

[akshatsinghai6682-sketch]

Notes for Reviewers
This PR fixes #1143

Fixes the copy-to-clipboard button used on code blocks site-wide:

1. Removes the slight position shift that occurred on click (caused by Docsy's default :active { transform: translateY(2px); } press effect).
2. Adds a checkmark icon that briefly appears after a successful copy, in addition to the existing "Copied!" tooltip, for clearer visual confirmation.

Screen.Recording.2026-07-10.at.1.20.18.PM.mov

Changes:

• Added assets/js/click-to-copy.js — a site-level override of Docsy's theme file (Hugo lets the site's own assets/ take priority over same-path theme files), adding checkmark swap logic on copy.
• Edited assets/scss/_styles_project.scss — added &:active { transform: none !important; } to remove the shift, and &.td-click-to-copy--copied { color: $success !important; } to style the checkmark state.

Tested locally via make site across multiple docs pages containing code blocks — confirmed both the shift is gone and the checkmark now displays correctly.

Signed commits

• Yes, I signed my commits.

[gemini-code-assist]

Code Review

This pull request introduces a 'click-to-copy' feature for code blocks, including logic to prune unselectable elements from console blocks and corresponding SCSS styles for the copy button. The review feedback highlights several potential runtime errors: a missing guard check if a code listing does not contain a element, a potential crash if navigator.clipboard is undefined in insecure contexts, and a possible null reference when accessing window.getComputedStyle in certain environments.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[github-actions]

🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-1144/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[ishwar170695]

Nice UX improvement. One thing I noticed: navigator.clipboard.writeText() is asynchronous, but the success UI (tooltip + checkmark) is shown immediately after calling copyCode(). If the clipboard write is rejected (for example due to permissions or browser restrictions), users would still see "Copied!". Would it make sense to return the writeText() Promise from copyCode() and only switch to the success state after it resolves?

[akshatsinghai6682-sketch]

Nice UX improvement. One thing I noticed: navigator.clipboard.writeText() is asynchronous, but the success UI (tooltip + checkmark) is shown immediately after calling copyCode(). If the clipboard write is rejected (for example due to permissions or browser restrictions), users would still see "Copied!". Would it make sense to return the writeText() Promise from copyCode() and only switch to the success state after it resolves?

Good catch, @ishwar170695 done — copyCode() now returns the writeText() promise, and the success UI only shows after it resolves (with a .catch() for the failure case).

[Bharath314]

That's a nice UX change! I have a few comments though. Feel free to go through them whenever you have time. Cheers!

[akshatsinghai6682-sketch]

@Bharath314 Thanks for the feedback I will look into it

[akshatsinghai6682-sketch]

@Bharath314 I have Addressed all your feedbacks Plz review whenever possible Thanks