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:
2026-08-26 17:26:12 -04:00
parent 84621484da
commit d5f8c2e480
2 changed files with 19 additions and 30 deletions

View File

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