cottongin/reddit-tweaks-ffe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: switch popover back to position:absolute with dynamic max-height

Browse Source 
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>
This commit is contained in:
cottongin
2026-08-26 17:42:51 -04:00
parent d5f8c2e480
commit fb0c03d46a
2 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
content/styles/badges.css
View File

@@ -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;

30
content/tweaks/color-popover.js
View File

@@ -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";