From fb0c03d46ad6208da851aead0c525d6176b504ca Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Wed, 26 Aug 2026 17:42:51 -0400
Subject: [PATCH] fix: switch popover back to position:absolute with dynamic
 max-height

position:fixed pinned the popover to the viewport layer, so scrolling
the page could never reveal off-screen content. Revert to absolute
positioning (scrolls with the page) and dynamically compute max-height
based on available viewport space so the popover fits and scrolls
internally when content exceeds the available area.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 content/styles/badges.css       |  3 +--
 content/tweaks/color-popover.js | 30 ++++++++++++++++++------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/content/styles/badges.css b/content/styles/badges.css
index 4d689f6..bd5bd74 100644
--- a/content/styles/badges.css
+++ b/content/styles/badges.css
@@ -86,7 +86,7 @@ html.rt-enabled .thing.link .flat-list li:has(> .comments) {
 
 /* --- Color popover --- */
 .rt-color-popover {
-  position: fixed;
+  position: absolute;
   z-index: 10000;
   background: #fff;
   border: 1px solid #ccc;
@@ -94,7 +94,6 @@ html.rt-enabled .thing.link .flat-list li:has(> .comments) {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
   padding: 12px;
   width: 260px;
-  max-height: calc(100vh - 20px);
   overflow-y: auto;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 13px;
diff --git a/content/tweaks/color-popover.js b/content/tweaks/color-popover.js
index 862e452..680b5ad 100644
--- a/content/tweaks/color-popover.js
+++ b/content/tweaks/color-popover.js
@@ -240,25 +240,31 @@
     var pad = 10;
 
     popoverEl.style.visibility = "hidden";
+    popoverEl.style.maxHeight = "";
     popoverEl.classList.add("rt-popover-visible");
 
     var popRect = popoverEl.getBoundingClientRect();
+    var spaceBelow = window.innerHeight - rect.bottom - gap - pad;
+    var spaceAbove = rect.top - gap - pad;
 
-    var top = rect.bottom + gap;
-    var left = rect.left;
+    var top;
 
-    if (top + popRect.height > window.innerHeight - pad) {
-      var aboveTop = rect.top - popRect.height - gap;
-      if (aboveTop >= pad) {
-        top = aboveTop;
-      } else {
-        top = Math.max(pad, window.innerHeight - popRect.height - pad);
-      }
+    if (popRect.height <= spaceBelow) {
+      top = rect.bottom + window.scrollY + gap;
+    } else if (popRect.height <= spaceAbove) {
+      top = rect.top + window.scrollY - popRect.height - gap;
+    } else if (spaceBelow >= spaceAbove) {
+      top = rect.bottom + window.scrollY + gap;
+      popoverEl.style.maxHeight = Math.max(spaceBelow, 200) + "px";
+    } else {
+      var capped = Math.max(spaceAbove, 200);
+      popoverEl.style.maxHeight = capped + "px";
+      top = rect.top + window.scrollY - capped - gap;
     }
 
-    if (left + popRect.width > window.innerWidth - pad) {
-      left = window.innerWidth - popRect.width - pad;
-    }
+    var left = rect.left + window.scrollX;
+    var maxLeft = document.documentElement.scrollWidth - popRect.width - pad;
+    if (left > maxLeft) left = maxLeft;
     if (left < pad) left = pad;
 
     popoverEl.style.top = top + "px";