From ef9f63340de656d710cbe34dd401df9a99ac3d98 Mon Sep 17 00:00:00 2001
From: Yuriy Andamasov <yuriy@vyos.io>
Date: Wed, 6 May 2026 01:59:34 +0300
Subject: fix(codecopier): exclude Copy label from clipboard and stop showing
 false success
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two real bugs in the docs site copy-to-clipboard handler, both flagged by
copilot review on PR #1886 (deferred there because that PR is scoped to typos).

Bug 1: Copy label leaked into copied snippets on narrow screens
The handler read `currentTarget.offsetParent.innerText`. The same handler
appends a visible `.copyDiv` (with a 'Copy' <p>) into that container.
Below the 992px breakpoint the label is visible (see code-snippets.css
.copyDiv > p) so users got 'Copy' appended to every copied snippet.

Fix: extract text from the <pre> element inside the container instead,
which excludes the injected button. Also switched the lookup root from
`offsetParent` to `parentElement` so the source-of-truth is the DOM
relationship (the .copyDiv is inserted as a beforeend child of the inner
.highlight div via insertAdjacentHTML), not CSS positioning.

Bug 2: Failed clipboard writes still showed 'Copied!'
The try/catch only logged on failure but the surrounding code still flipped
the button into the copiedNotifier success state. Users got false success
when writeText rejected (insecure context, permission denied, etc.).

Fix: move the success UI flip inside the try, add an explicit failure UI
flip ('Failed' text + new `.copyFailedNotifier` class with red background)
in the catch. setTimeout still reverts both classes after 2s.

Verified in browser with a sphinx-rendered fixture (jQuery 3.7 + Pygments
output): both snippets copy their own text without the Copy label, success
flow shows Copied!, simulated writeText rejection shows Failed, both states
revert after 2s.

🤖 Generated by [robots](https://vyos.io)
---
 docs/_static/css/code-snippets.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'docs/_static/css/code-snippets.css')

diff --git a/docs/_static/css/code-snippets.css b/docs/_static/css/code-snippets.css
index 555b80d7..ccdb415b 100644
--- a/docs/_static/css/code-snippets.css
+++ b/docs/_static/css/code-snippets.css
@@ -69,13 +69,18 @@
   margin-top: 4px;
 }
 
-.copiedNotifier > span {
+.copiedNotifier > span,
+.copyFailedNotifier > span {
   font-size: 14px !important;
   color: #fff !important;
   text-align: center;
   margin-bottom: 0;
 }
 
+.copyFailedNotifier {
+  background-color: #b3261e;
+}
+
 .highlight {
 
   & .kn {
-- 
cgit v1.2.3