fix: stabilize popover positioning and prevent viewport overflow
- Switch popover from position:absolute to position:fixed to avoid scroll-offset math and simplify viewport clamping. - Add max-height + overflow-y:auto so the popover scrolls internally instead of overflowing the viewport. - Remove the reposition call after picker opens — this was causing the popover to flash and jump when the picker changed its height. - Improve edge clamping: if neither above nor below fits, clamp to viewport bottom rather than flipping unpredictably. - Remove the CSS arrow (::before) which was mispositioned when the popover appeared above the badge or near edges. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -161,7 +161,6 @@
|
||||
row.hex.classList.remove("rt-input-error");
|
||||
updatePreview();
|
||||
});
|
||||
if (currentAnchor) positionPopover(currentAnchor);
|
||||
}
|
||||
|
||||
function closePicker() {
|
||||
@@ -238,21 +237,29 @@
|
||||
function positionPopover(anchorEl) {
|
||||
var rect = anchorEl.getBoundingClientRect();
|
||||
var gap = 6;
|
||||
var pad = 10;
|
||||
|
||||
popoverEl.style.visibility = "hidden";
|
||||
popoverEl.classList.add("rt-popover-visible");
|
||||
|
||||
var popRect = popoverEl.getBoundingClientRect();
|
||||
var top = rect.bottom + window.scrollY + gap;
|
||||
var left = rect.left + window.scrollX;
|
||||
|
||||
if (rect.bottom + gap + popRect.height > window.innerHeight) {
|
||||
top = rect.top + window.scrollY - popRect.height - gap;
|
||||
var top = rect.bottom + gap;
|
||||
var left = rect.left;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
var maxLeft = document.documentElement.scrollWidth - popRect.width - 8;
|
||||
if (left > maxLeft) left = maxLeft;
|
||||
if (left < 8) left = 8;
|
||||
if (left + popRect.width > window.innerWidth - pad) {
|
||||
left = window.innerWidth - popRect.width - pad;
|
||||
}
|
||||
if (left < pad) left = pad;
|
||||
|
||||
popoverEl.style.top = top + "px";
|
||||
popoverEl.style.left = left + "px";
|
||||
|
||||
Reference in New Issue
Block a user