Flip popover when needed

Author: sea-snake

src/frontend/src/lib/components/ui/Popover.svelte

@@ -37,46 +37,89 @@
 
   $effect(() => {
     let tracking = true;
+
     const track = () => {
       if (nonNullish(anchorRef) && nonNullish(popoverRef)) {
         const anchorRect = anchorRef.getBoundingClientRect();
         const popoverRect = popoverRef.getBoundingClientRect();
 
+        // Available space around the anchor
+        const spaceAbove = anchorRect.top;
+        const spaceBelow = window.innerHeight - anchorRect.bottom;
+        const spaceLeft = anchorRect.left;
+        const spaceRight = window.innerWidth - anchorRect.right;
+
+        // Determine flipped direction if needed
+        let finalDirection = direction;
+
+        // Vertical flip
+        if (
+          direction === "down" &&
+          spaceBelow < popoverRect.height &&
+          spaceAbove > spaceBelow
+        ) {
+          finalDirection = "up";
+        } else if (
+          direction === "up" &&
+          spaceAbove < popoverRect.height &&
+          spaceBelow > spaceAbove
+        ) {
+          finalDirection = "down";
+        }
+
+        // Horizontal flip
+        if (
+          direction === "right" &&
+          spaceRight < popoverRect.width &&
+          spaceLeft > spaceRight
+        ) {
+          finalDirection = "left";
+        } else if (
+          direction === "left" &&
+          spaceLeft < popoverRect.width &&
+          spaceRight > spaceLeft
+        ) {
+          finalDirection = "right";
+        }
+
+        // Compute top position
         popoverRef.style.top = {
           up: `calc(${anchorRect.top - popoverRect.height}px - ${distance})`,
-          right: {
+          down: `calc(${anchorRect.bottom}px + ${distance})`,
+          left: {
             start: `${anchorRect.top}px`,
             center: `${anchorRect.top + anchorRect.height * 0.5 - popoverRect.height * 0.5}px`,
             end: `${anchorRect.bottom - popoverRect.height}px`,
           }[align],
-          down: `calc(${anchorRect.bottom}px + ${distance})`,
-          left: {
+          right: {
             start: `${anchorRect.top}px`,
             center: `${anchorRect.top + anchorRect.height * 0.5 - popoverRect.height * 0.5}px`,
             end: `${anchorRect.bottom - popoverRect.height}px`,
           }[align],
-        }[direction];
+        }[finalDirection];
 
+        // Compute left position
         popoverRef.style.left = {
           up: {
             start: `${anchorRect.left}px`,
             center: `${anchorRect.left + anchorRect.width * 0.5 - popoverRect.width * 0.5}px`,
             end: `${anchorRect.right - popoverRect.width}px`,
           }[align],
-          right: `calc(${anchorRect.right}px + ${distance})`,
           down: {
             start: `${anchorRect.left}px`,
             center: `${anchorRect.left + anchorRect.width * 0.5 - popoverRect.width * 0.5}px`,
             end: `${anchorRect.right - popoverRect.width}px`,
           }[align],
           left: `calc(${anchorRect.left - popoverRect.width}px - ${distance})`,
-        }[direction];
-      }
-      if (tracking) {
-        requestAnimationFrame(track);
+          right: `calc(${anchorRect.right}px + ${distance})`,
+        }[finalDirection];
       }
+
+      if (tracking) requestAnimationFrame(track);
     };
+
     requestAnimationFrame(track);
+
     return () => {
       tracking = false;
     };