Fix store item variant defaults and listing sorting

Auto-select first option in variation modals and sort store items by availability, then update time.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/super-admin/src/components/BusinessActionsOverflowMenu.module.css

@@ -27,7 +27,6 @@
 .menu {
   position: fixed;
   z-index: 1200;
-  transform: translateX(-100%);
   min-width: 220px;
   padding: 6px;
   border-radius: 10px;
@@ -98,10 +97,10 @@
 @keyframes menuIn {
   from {
     opacity: 0;
-    transform: translateX(-100%) translateY(-4px);
+    transform: translateY(-4px);
   }
   to {
     opacity: 1;
-    transform: translateX(-100%) translateY(0);
+    transform: translateY(0);
   }
 }

apps/super-admin/src/components/BusinessActionsOverflowMenu.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Eraser, MoreHorizontal, Trash2, Users } from 'lucide-react'
+import { fitFixedPopover } from '../utils/fitFixedPopover'
 import styles from './BusinessActionsOverflowMenu.module.css'
 
 type PopoverPosition = {
@@ -31,10 +32,11 @@ export function BusinessActionsOverflowMenu({
     const rect = triggerRef.current?.getBoundingClientRect()
     if (!rect) return
 
-    setPopoverPos({
-      top: rect.bottom + 8,
-      left: rect.right,
-    })
+    const size = popoverRef.current
+      ? { width: popoverRef.current.offsetWidth, height: popoverRef.current.offsetHeight }
+      : { width: 220, height: 160 }
+
+    setPopoverPos(fitFixedPopover(rect, size, 'end'))
   }
 
   function toggleOpen() {
@@ -47,6 +49,11 @@ export function BusinessActionsOverflowMenu({
     setOpen(true)
   }
 
+  useLayoutEffect(() => {
+    if (!open) return
+    updatePopoverPosition()
+  }, [open])
+
   useEffect(() => {
     if (!open) return
 

apps/super-admin/src/components/DomainLinksOverflowMenu.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import {
   Building2,
@@ -8,6 +8,7 @@ import {
   Trash2,
   UserRound,
 } from 'lucide-react'
+import { fitFixedPopover } from '../utils/fitFixedPopover'
 import styles from './BusinessActionsOverflowMenu.module.css'
 
 type PopoverPosition = {
@@ -52,10 +53,11 @@ export function DomainLinksOverflowMenu({ host, onRemove }: DomainLinksOverflowM
     const rect = triggerRef.current?.getBoundingClientRect()
     if (!rect) return
 
-    setPopoverPos({
-      top: rect.bottom + 8,
-      left: rect.right,
-    })
+    const size = popoverRef.current
+      ? { width: popoverRef.current.offsetWidth, height: popoverRef.current.offsetHeight }
+      : { width: 220, height: 220 }
+
+    setPopoverPos(fitFixedPopover(rect, size, 'end'))
   }
 
   function toggleOpen() {
@@ -68,6 +70,11 @@ export function DomainLinksOverflowMenu({ host, onRemove }: DomainLinksOverflowM
     setOpen(true)
   }
 
+  useLayoutEffect(() => {
+    if (!open) return
+    updatePopoverPosition()
+  }, [open])
+
   useEffect(() => {
     if (!open) return
 

apps/super-admin/src/components/PrimaryColorSwatchControl.module.css

@@ -41,7 +41,6 @@
 .popover {
   position: fixed;
   z-index: 1200;
-  transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   gap: 10px;

apps/super-admin/src/components/PrimaryColorSwatchControl.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Moon, Sun } from 'lucide-react'
 import {
@@ -7,6 +7,7 @@ import {
   type BusinessPrimaryColorId,
 } from '../utils/businessPrimaryColors'
 import type { DashboardThemeMode } from '../services/businessSettingsService'
+import { fitFixedPopover } from '../utils/fitFixedPopover'
 import styles from './PrimaryColorSwatchControl.module.css'
 
 interface PrimaryColorSwatchControlProps {
@@ -41,10 +42,11 @@ export function PrimaryColorSwatchControl({
     const rect = triggerRef.current?.getBoundingClientRect()
     if (!rect) return
 
-    setPopoverPos({
-      top: rect.bottom + 8,
-      left: rect.left + rect.width / 2,
-    })
+    const size = popoverRef.current
+      ? { width: popoverRef.current.offsetWidth, height: popoverRef.current.offsetHeight }
+      : { width: 220, height: 160 }
+
+    setPopoverPos(fitFixedPopover(rect, size, 'center'))
   }
 
   function toggleOpen() {
@@ -72,6 +74,11 @@ export function PrimaryColorSwatchControl({
     }
   }
 
+  useLayoutEffect(() => {
+    if (!open) return
+    updatePopoverPosition()
+  }, [open])
+
   useEffect(() => {
     if (!open) return