Size the annotated copy button margin in the code font size

The margin multiplied $code-block-font-size inside calc(), which only
matches the gutter for length units. A percentage, which a theme or a
brand typography size can set, resolved against the scaffold width in
a margin, and pushed the button about 290px into the code.

The button now takes the code block font size itself, so it shares the
pre's em, and the margin repeats the gutter's own calc(20px + 0.5em)
plus 5px. That holds for any value the pre accepts. The copy icon is
sized in rem, so it keeps its size.

Author: cderv

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

@@ -1997,11 +1997,12 @@ textarea {
 
 // Code Annotation
 
-// 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.
+// The copy button is a sibling of div.sourceCode, so it takes the code font
+// size here to share the gutter's em, then clears the gutter
+// (calc(20px + 0.5em)) plus the default 5px margin. Its icon is sized in rem.
 .code-copy-outer-scaffold:has(pre.code-annotated) > .code-copy-button {
-  margin-right: calc(20px + 0.5 * #{$code-block-font-size} + 5px);
+  font-size: $code-block-font-size;
+  margin-right: calc(20px + 0.5em + 5px);
   margin-top: 0;
   padding-bottom: 0;
   padding-top: 3px;

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

@@ -0,0 +1,13 @@
+---
+title: "Code copy button and code annotation marker (code block font size in percent)"
+format:
+  html:
+    theme: [default, code-annotation-copy-button-font-size-percent.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-percent.scss

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

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

@@ -19,6 +19,10 @@ const testCases = [
     name: "hover with a custom code block font size",
     url: "html/code-annotation-copy-button-font-size.html",
   },
+  {
+    name: "hover with a code block font size in percent",
+    url: "html/code-annotation-copy-button-font-size-percent.html",
+  },
 ];
 
 test.describe("code copy button and code annotation marker", () => {