Keep the code copy button inside code blocks in callouts

Since code blocks are wrapped in .code-copy-outer-scaffold, the callout
first/last-child rules hit the scaffold instead of div.sourceCode. The
padding-top added to a first child stopped the code block's own 1em margin
from collapsing, and the absolutely positioned copy button anchors to the
scaffold's padding box, so in a default-style callout starting with code
the button sat about 19px above the code, half outside it. The
last-child rules, which meant to exempt code blocks with
:not(.sourceCode), padded the scaffold too, leaving an extra gap below
code at the end of a callout. The `> div > :last-child` branch also
matched the button itself, the scaffold's last child, and gave it 8.5px
of bottom padding.

At a callout edge, the scaffold is now spaced with margin instead of
padding and the inner div.sourceCode margin is dropped, for bare code
blocks and for cells whose code is at that edge. The button sits 5px
inside the code top, as it does outside callouts, and code at the top or
bottom of a callout gets the same gap as a paragraph there. This is a
visible change from 1.7, where the code frame of a titled callout sat
flush against the header. The general padding-to-margin change asked for
in #13238 touches non-code first children too and is left out.

Fixes #13446

Author: cderv

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

@@ -1522,11 +1522,41 @@ kbd,
 }
 
 .callout.callout-titled .callout-body > :last-child:not(.sourceCode),
-.callout.callout-titled .callout-body > div > :last-child:not(.sourceCode) {
+.callout.callout-titled .callout-body > div > :last-child:not(.sourceCode, .code-copy-button) {
   padding-bottom: 0.5rem;
   margin-bottom: 0;
 }
 
+// Code blocks are wrapped in .code-copy-outer-scaffold, which positions the
+// copy button. At a callout edge, space the scaffold with margin instead of
+// padding and drop the code block's own margin, so the button stays inside
+// the code frame and the gap matches a paragraph's.
+.callout .callout-body-container > .code-copy-outer-scaffold:first-child > div.sourceCode,
+.callout .callout-body-container > .cell:first-child > .code-copy-outer-scaffold:first-child > div.sourceCode {
+  margin-top: 0;
+}
+
+.callout .callout-body-container > .code-copy-outer-scaffold:last-child > div.sourceCode,
+.callout .callout-body-container > .cell:last-child > .code-copy-outer-scaffold:last-child > div.sourceCode {
+  margin-bottom: 0;
+}
+
+.callout.callout-style-default .callout-body > .code-copy-outer-scaffold:first-child,
+.callout.callout-style-default .callout-body > .cell:first-child:has(> .code-copy-outer-scaffold:first-child) {
+  padding-top: 0;
+  margin-top: 0.5rem;
+}
+
+.callout.callout-titled .callout-body > .code-copy-outer-scaffold:last-child,
+.callout.callout-titled .callout-body > .cell:last-child:has(> .code-copy-outer-scaffold:last-child) {
+  padding-bottom: 0;
+  margin-bottom: 0.5rem;
+}
+
+.callout.callout-titled .callout-body > .cell:last-child > .code-copy-outer-scaffold:last-child {
+  padding-bottom: 0;
+}
+
 .callout:not(.callout-titled) .callout-body > :first-child,
 .callout:not(.callout-titled) .callout-body > div > :first-child {
   margin-top: 0.25rem;

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

@@ -0,0 +1,157 @@
+---
+title: "Code copy button in callouts"
+format: html
+code-annotations: hover
+---
+
+## Plain
+
+::: {#plain}
+
+```bash
+echo "plain"
+```
+
+:::
+
+## Titled, paragraph only
+
+::: {#titled-paragraph .callout-note}
+
+## Titled, paragraph only
+
+A paragraph.
+
+:::
+
+## Titled, code first
+
+::: {#titled-first .callout-note}
+
+## Titled, code first
+
+```bash
+echo "first"
+```
+
+A paragraph.
+
+:::
+
+## Titled, code last
+
+::: {#titled-last .callout-note}
+
+## Titled, code last
+
+A paragraph.
+
+```bash
+echo "last"
+```
+
+:::
+
+## Collapsible, code first
+
+::: {#collapse-first .callout-note collapse="false"}
+
+## Collapsible, code first
+
+```bash
+echo "first"
+```
+
+A paragraph.
+
+:::
+
+## Titled, cell first
+
+::: {#titled-cell-first .callout-note}
+
+## Titled, cell first
+
+::: {.cell}
+
+```{.r .cell-code}
+1 + 1
+```
+
+:::
+
+A paragraph.
+
+:::
+
+## Titled, cell last
+
+::: {#titled-cell-last .callout-note}
+
+## Titled, cell last
+
+A paragraph.
+
+::: {.cell}
+
+```{.r .cell-code}
+1 + 1
+```
+
+:::
+
+:::
+
+## Titled, annotated code first
+
+::: {#titled-annotated .callout-note}
+
+## Titled, annotated code first
+
+```python
+import polars as pl # <1>
+```
+
+1. Import polars.
+
+:::
+
+## Simple, paragraph only
+
+::: {#simple-paragraph .callout-note appearance="simple"}
+
+A paragraph.
+
+:::
+
+## Simple, code first
+
+::: {#simple-first .callout-note appearance="simple"}
+
+```bash
+echo "first"
+```
+
+A paragraph.
+
+:::
+
+## Minimal, paragraph only
+
+::: {#minimal-paragraph .callout-note appearance="minimal"}
+
+A paragraph.
+
+:::
+
+## Minimal, code last
+
+::: {#minimal-last .callout-note appearance="minimal"}
+
+A paragraph.
+
+```bash
+echo "last"
+```
+
+:::

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

@@ -0,0 +1,95 @@
+import { expect, test, type Page } from "@playwright/test";
+import { getUrl } from "../src/utils";
+
+// Regression tests for #13446 and #13238. Code blocks are wrapped in
+// div.code-copy-outer-scaffold, which holds div.sourceCode and the copy
+// button. The callout first/last-child rules must treat that wrapper like a
+// code block: the button stays inside the code frame, and code at the edge of
+// a callout gets the same gap as a paragraph there.
+
+interface Geometry {
+  // Copy button top minus div.sourceCode top
+  buttonOffset: number | null;
+  buttonHeight: number | null;
+  // Visible top of the first block below the header (or callout top)
+  topGap: number;
+  // Callout bottom minus visible bottom of the last block
+  bottomGap: number;
+}
+
+async function geometry(page: Page, id: string): Promise<Geometry> {
+  return await page.evaluate((id) => {
+    const el = document.getElementById(id)!;
+    // Code frame is the div.sourceCode border box; text is a paragraph's
+    // content box.
+    const visible = (e: Element) => {
+      const r = e.getBoundingClientRect();
+      if (e.tagName !== "P") return { top: r.top, bottom: r.bottom };
+      const cs = getComputedStyle(e);
+      return {
+        top: r.top + parseFloat(cs.paddingTop),
+        bottom: r.bottom - parseFloat(cs.paddingBottom),
+      };
+    };
+    const header = el.querySelector(".callout-header");
+    const ref = header && getComputedStyle(header).display !== "none"
+      ? header.getBoundingClientRect().bottom
+      : el.getBoundingClientRect().top;
+    const blocks = Array.from(
+      el.querySelectorAll("div.sourceCode, .callout-body-container > p"),
+    );
+    const div = el.querySelector("div.sourceCode");
+    const button = el.querySelector(".code-copy-button");
+    return {
+      buttonOffset: div && button
+        ? button.getBoundingClientRect().top - div.getBoundingClientRect().top
+        : null,
+      buttonHeight: button ? button.getBoundingClientRect().height : null,
+      topGap: visible(blocks[0]).top - ref,
+      bottomGap: el.getBoundingClientRect().bottom -
+        visible(blocks[blocks.length - 1]).bottom,
+    };
+  }, id);
+}
+
+// Code callouts, with the paragraph-only callout of the same appearance
+// they are compared with at the edge where the code sits.
+const cases = [
+  { id: "titled-first", edge: "top", reference: "titled-paragraph" },
+  { id: "titled-last", edge: "bottom", reference: "titled-paragraph" },
+  { id: "titled-cell-first", edge: "top", reference: "titled-paragraph" },
+  { id: "titled-cell-last", edge: "bottom", reference: "titled-paragraph" },
+  { id: "titled-annotated", edge: "top", reference: "titled-paragraph" },
+  { id: "collapse-first", edge: null, reference: null },
+  { id: "simple-first", edge: "top", reference: "simple-paragraph" },
+  { id: "minimal-last", edge: "bottom", reference: "minimal-paragraph" },
+] as const;
+
+test.describe("Code copy button in callouts", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(getUrl("html/callout-code-copy-button.html"), {
+      waitUntil: "load",
+    });
+  });
+
+  for (const { id, edge, reference } of cases) {
+    test(`${id}: copy button sits inside the code frame`, async ({ page }) => {
+      const plain = await geometry(page, "plain");
+      const code = await geometry(page, id);
+      expect(code.buttonOffset).not.toBeNull();
+      expect(Math.abs(code.buttonOffset! - plain.buttonOffset!))
+        .toBeLessThanOrEqual(1);
+      expect(Math.abs(code.buttonHeight! - plain.buttonHeight!))
+        .toBeLessThanOrEqual(1);
+    });
+
+    if (edge && reference) {
+      test(`${id}: code at the ${edge} edge is spaced like a paragraph`, async ({ page }) => {
+        const code = await geometry(page, id);
+        const para = await geometry(page, reference);
+        const gap = edge === "top" ? "topGap" : "bottomGap";
+        expect(Math.abs(code[gap] - para[gap])).toBeLessThanOrEqual(1);
+      });
+    }
+  }
+});