Keep the code copy button clear of the annotation gutter

Since the copy button moved out of the pre into the outer scaffold, the
rule that shifted it left of the annotation gutter matched nothing, so
the button sat on top of the marker of an annotated first line and
swallowed its hover or click. The scaffold stays: it keeps the button
from scrolling with the code while line numbers need visible overflow.

The rule now targets the button through the scaffold that holds an
annotated pre. Its margin can no longer be 1.25em: that relied on the
button inheriting the code font size, and as a sibling of div.sourceCode
its em is now the body size. The margin is the gutter width,
calc(20px + 0.5em) in code font size, rewritten as 0.5 times
$code-block-font-size so it holds when a theme changes that size, plus
the default 5px. The button and the pre resolve em from the same
parent, so the two stay in step.

The test now also covers select mode, a theme with a 0.75em code block
font size, and checks that the button of a block without annotations
keeps its default position.

Fixes #13444

Author: cderv

news/changelog-1.11.md

@@ -2,6 +2,7 @@ All changes included in 1.11:
 
 ## Regression fixes
 
+- ([#13444](https://github.com/quarto-dev/quarto-cli/issues/13444)): Fix the code copy button in `html` covering the code annotation marker on the first line of an annotated code block, which stopped the annotation from showing on hover or click (regression introduced in v1.8.15).
 - ([#14920](https://github.com/quarto-dev/quarto-cli/issues/14920)): Fix Windows ARM diagnostics for x64 R crashes to preserve the specialized error in `quarto check`, JSON output, and render failures, and update the native ARM64 R installation guidance.
 - ([#14731](https://github.com/quarto-dev/quarto-cli/pull/14731)): Fix `QUARTO_VENDOR_BINARIES=false` builds silently succeeding with missing binaries. The `configure` step's "is it on PATH?" check for `typst-gather`, `typst`, `pandoc` and `esbuild` compared an unawaited `Promise` against `undefined`, so the guard never fired. A build with `typst-gather` neither vendored nor on PATH reported success and produced a Quarto tree without it, surfacing only at render time as `typst-gather analyze failed; staging all packages as fallback`. The missing-binary error message now also names the path that was checked and the `QUARTO_TYPST_GATHER` environment variable.
 - ([#14741](https://github.com/quarto-dev/quarto-cli/issues/14741)): Fix PDF rendering of a cross-referenced table failing with `! Extra }, or forgotten \endgroup.` when the `endfloat` package defers `longtable` environments (`\DeclareDelayedFloatFlavor*{longtable}{table}`).

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -1997,8 +1997,11 @@ textarea {
 
 // Code Annotation
 
-.code-annotated .code-copy-button {
-  margin-right: 1.25em;
+// The copy button is a sibling of div.sourceCode, so its em is not the code
+// font size. Clear the gutter (calc(20px + 0.5em) in code font size) plus the
+// default 5px margin.
+.code-copy-outer-scaffold:has(pre.code-annotated) > .code-copy-button {
+  margin-right: calc(20px + 0.5 * #{$code-block-font-size} + 5px);
   margin-top: 0;
   padding-bottom: 0;
   padding-top: 3px;

tests/docs/playwright/html/code-annotation-copy-button-font-size.qmd

@@ -0,0 +1,13 @@
+---
+title: "Code copy button and code annotation marker (code block font size)"
+format:
+  html:
+    theme: [default, code-annotation-copy-button-font-size.scss]
+code-annotations: hover
+---
+
+```{.python}
+import polars as pl # <1>
+```
+
+1. This is a code block with a copy button and an annotation.

tests/docs/playwright/html/code-annotation-copy-button-font-size.scss

@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$code-block-font-size: 0.75em;

tests/docs/playwright/html/code-annotation-copy-button-select.qmd

@@ -0,0 +1,11 @@
+---
+title: "Code copy button and code annotation marker (select)"
+format: html
+code-annotations: select
+---
+
+```{.python}
+import polars as pl # <1>
+```
+
+1. This is a code block with a copy button and an annotation.

tests/docs/playwright/html/code-annotation-copy-button.qmd

@@ -9,3 +9,9 @@ import polars as pl # <1>
 ```
 
 1. This is a code block with a copy button and an annotation.
+
+A code block without annotations keeps the copy button in its default place.
+
+```{.python}
+import polars as pl
+```

tests/integration/playwright/tests/html-code-annotation-copy-button.spec.ts

@@ -1,35 +1,85 @@
-import { expect, test } from "@playwright/test";
+import { expect, Locator, test } from "@playwright/test";
 import { getUrl } from "../src/utils";
 
 // Regression test for #13444. The code copy button sits in the top-right
 // corner of the code block, where the annotation gutter shows the marker of
 // an annotated first line. The button must stay clear of the gutter so the
-// marker can still be hovered to show its annotation.
-test("code copy button does not cover the code annotation marker", async ({
-  page,
-}) => {
-  await page.goto(getUrl("html/code-annotation-copy-button.html"), {
-    waitUntil: "load",
-  });
+// marker can still be hovered (or clicked) to show its annotation.
 
-  const anchor = page.locator("button.code-annotation-anchor");
-  await expect(anchor).toHaveCount(1);
-  const box = await anchor.boundingBox();
+const rightEdge = async (locator: Locator) => {
+  const box = await locator.boundingBox();
   expect(box).not.toBeNull();
-  const x = box!.x + box!.width / 2;
-  const y = box!.y + box!.height / 2;
-
-  // Hovering the code block reveals the copy button, so check the marker is
-  // still the top-most element at its own center while the button is shown.
-  await page.mouse.move(x, y);
-  const hit = await page.evaluate(
-    ([px, py]) =>
-      document.elementFromPoint(px, py)?.closest(
-        ".code-annotation-anchor, .code-copy-button",
-      )?.className ?? null,
-    [x, y],
-  );
-  expect(hit).toContain("code-annotation-anchor");
-
-  await expect(page.locator(".code-annotation-tip-content")).toBeVisible();
+  return box!.x + box!.width;
+};
+
+const testCases = [
+  { name: "hover", url: "html/code-annotation-copy-button.html" },
+  { name: "select", url: "html/code-annotation-copy-button-select.html" },
+  {
+    name: "hover with a custom code block font size",
+    url: "html/code-annotation-copy-button-font-size.html",
+  },
+];
+
+test.describe("code copy button and code annotation marker", () => {
+  for (const { name, url } of testCases) {
+    test(`${name} — copy button does not cover the marker`, async ({ page }) => {
+      await page.goto(getUrl(url), { waitUntil: "load" });
+
+      const scaffold = page.locator(".code-copy-outer-scaffold").filter({
+        has: page.locator("pre.code-annotated"),
+      });
+      const anchor = scaffold.locator("button.code-annotation-anchor");
+      await expect(anchor).toHaveCount(1);
+      const box = await anchor.boundingBox();
+      expect(box).not.toBeNull();
+      const x = box!.x + box!.width / 2;
+      const y = box!.y + box!.height / 2;
+
+      // Hovering the code block reveals the copy button, so check the marker
+      // is still the top-most element at its own center while the button is
+      // shown.
+      await page.mouse.move(x, y);
+      const hit = await page.evaluate(
+        ([px, py]) =>
+          document.elementFromPoint(px, py)?.closest(
+            ".code-annotation-anchor, .code-copy-button",
+          )?.className ?? null,
+        [x, y],
+      );
+      expect(hit).toContain("code-annotation-anchor");
+
+      // The button sits the default 5px left of the gutter, whatever the code
+      // block font size the gutter width is derived from.
+      const gutterLeft = (await scaffold.locator(".code-annotation-gutter")
+        .boundingBox())!.x;
+      const buttonRight = await rightEdge(
+        scaffold.locator(".code-copy-button"),
+      );
+      expect(Math.abs(gutterLeft - buttonRight - 5)).toBeLessThanOrEqual(1);
+
+      if (name === "select") {
+        await page.mouse.click(x, y);
+      }
+      await expect(page.locator(".code-annotation-tip-content")).toBeVisible();
+    });
+  }
+
+  test("copy button of a block without annotations is unchanged", async ({
+    page,
+  }) => {
+    await page.goto(getUrl("html/code-annotation-copy-button.html"), {
+      waitUntil: "load",
+    });
+
+    const scaffold = page.locator(".code-copy-outer-scaffold").filter({
+      hasNot: page.locator("pre.code-annotated"),
+    });
+    await expect(scaffold).toHaveCount(1);
+    const button = scaffold.locator(".code-copy-button");
+    await expect(button).toHaveCSS("right", "0px");
+    await expect(button).toHaveCSS("margin-right", "5px");
+    expect((await rightEdge(scaffold)) - (await rightEdge(button)))
+      .toBeCloseTo(5, 0);
+  });
 });