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 --- */ /* --- Color popover --- */
.rt-color-popover { .rt-color-popover {
position: fixed; position: absolute;
z-index: 10000; z-index: 10000;
background: #fff; background: #fff;
border: 1px solid #ccc; 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); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
padding: 12px; padding: 12px;
width: 260px; width: 260px;
max-height: calc(100vh - 20px);
overflow-y: auto; overflow-y: auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 13px; font-size: 13px;

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

@@ -240,25 +240,31 @@
var pad = 10; var pad = 10;
popoverEl.style.visibility = "hidden"; popoverEl.style.visibility = "hidden";
popoverEl.style.maxHeight = "";
popoverEl.classList.add("rt-popover-visible"); popoverEl.classList.add("rt-popover-visible");
var popRect = popoverEl.getBoundingClientRect(); var popRect = popoverEl.getBoundingClientRect();
var spaceBelow = window.innerHeight - rect.bottom - gap - pad;
var spaceAbove = rect.top - gap - pad;
var top = rect.bottom + gap; var top;
var left = rect.left;
if (top + popRect.height > window.innerHeight - pad) { if (popRect.height <= spaceBelow) {
var aboveTop = rect.top - popRect.height - gap; top = rect.bottom + window.scrollY + gap;
if (aboveTop >= pad) { } else if (popRect.height <= spaceAbove) {
top = aboveTop; 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 { } else {
top = Math.max(pad, window.innerHeight - popRect.height - pad); 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) { var left = rect.left + window.scrollX;
left = window.innerWidth - popRect.width - pad; var maxLeft = document.documentElement.scrollWidth - popRect.width - pad;
} if (left > maxLeft) left = maxLeft;
if (left < pad) left = pad; if (left < pad) left = pad;
popoverEl.style.top = top + "px"; popoverEl.style.top = top + "px";