Use anchor positioning for copyable source

To prevent overflow issue with tooltips and the source copy button caused by `position: relative`, use anchors instead (and add a polyfill).
unisonweb · Jan 7, 2025 · d4510ca · d4510ca
1 parent adafca5
commit d4510ca
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "prettier": "^2.8.4"
   },
   "dependencies": {
+    "@oddbird/css-anchor-positioning": "^0.4.0",
     "date-fns": "^2.29.3",
     "katex": "^0.16.4",
     "mermaid": "^10.6.1"

diff --git a/src/UI/init.js b/src/UI/init.js
@@ -0,0 +1,5 @@
+import polyfill from '@oddbird/css-anchor-positioning/fn';
+
+if (!("anchorName" in document.documentElement.style)) {
+  polyfill();
+}
diff --git a/src/css/code/definition-doc.css b/src/css/code/definition-doc.css
@@ -117,16 +117,17 @@
 }
 
 .definition-doc .copyable-source {
-  position: relative;
+  anchor-name: --copyable-source;
 }
 
 .definition-doc .copyable-source .copy-on-click {
+  position-anchor: --copyable-source;
   position: absolute;
-  top: 0;
-  right: 0;
-  display: none;
+  top: anchor(0%);
+  right: anchor(100%);
   background: var(--u-color_action);
   border-radius: var(--border-radius-base);
+  display: none;
 }
 
 .definition-doc .copyable-source:hover .copy-on-click {