Fix Misplaced dropdown when content has min-width

Fixed #447

Co-Authored-By: Hannes <42112359+karlsonxd@users.noreply.github.com>

Author: shahryarjb

priv/assets/js/floating.js

@@ -425,6 +425,51 @@ const Floating = {
       content.style.transform = "none";
     }
 
+    // Clamp to viewport to prevent content from overflowing screen edges.
+    // This runs regardless of smartPositioning to always keep content visible.
+    const contentWidth = content.offsetWidth;
+    const contentHeight = content.offsetHeight;
+    const viewportLeft = window.scrollX;
+    const viewportRight = window.scrollX + window.innerWidth;
+    const viewportTop = window.scrollY;
+    const viewportBottom = window.scrollY + window.innerHeight;
+
+    if (pos === "top" || pos === "bottom") {
+      // left is the center point (CSS translateX(-50%) shifts it), so actual edges are:
+      const actualLeft = left - contentWidth / 2;
+      const actualRight = left + contentWidth / 2;
+
+      if (actualRight > viewportRight) {
+        left = viewportRight - contentWidth - gap;
+        content.style.transform = "none";
+      } else if (actualLeft < viewportLeft) {
+        left = viewportLeft + gap;
+        content.style.transform = "none";
+      }
+
+      // When content is wider than viewport, the right-edge clamp pushes left off-screen.
+      // Always anchor to left edge so the start of content stays visible (LTR).
+      if (left < viewportLeft + gap) {
+        left = viewportLeft + gap;
+        content.style.transform = "none";
+      }
+    } else if (pos === "left" || pos === "right") {
+      if (top + contentHeight > viewportBottom) {
+        top = viewportBottom - contentHeight - gap;
+      }
+      if (top < viewportTop) {
+        top = viewportTop + gap;
+      }
+
+      // Horizontal clamping for left/right positions
+      if (left + contentWidth > viewportRight) {
+        left = viewportRight - contentWidth - gap;
+      }
+      if (left < viewportLeft + gap) {
+        left = viewportLeft + gap;
+      }
+    }
+
     content.style.position = "absolute";
     content.style.top = `${top}px`;
     content.style.left = `${left}px`;