fix: ensure submenu is aligned correctly in reference to the parent menu with floating-ui/react (#2868)

Author: MartinCupela

src/components/Dialog/DialogAnchor.tsx

@@ -42,7 +42,7 @@ export function useDialogAnchor<T extends HTMLElement>({
       // update is non-null only if popperElement is non-null
       update?.();
     }
-  }, [open, popperElement, update]);
+  }, [open, placement, popperElement, update]);
 
   if (popperElement && !open) {
     setPopperElement(null);

src/components/Dialog/hooks/usePopoverPosition.ts

@@ -69,13 +69,15 @@ export function usePopoverPosition({
 }: UsePopoverParams) {
   const autoMw = autoMiddlewareFor(placement);
   const offsetMiddleware = toOffsetMw(offset);
+  const isSidePlacement = placement.startsWith('left') || placement.startsWith('right');
 
   const middleware = [
     // offset first (mirrors common Popper setups)
     ...(offsetMiddleware ? [offsetMiddleware] : []),
 
     // choose between autoPlacement (Popper's "auto*") OR flip()
-    ...(autoMw ? [autoMw] : allowFlip ? [flipMw()] : []),
+    // only allow flip when not explicitly 'left*' or 'right*'
+    ...(autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flipMw()] : []),
 
     // viewport collision adjustments
     ...(allowShift ? [shiftMw({ padding: 8 })] : []),
@@ -93,6 +95,7 @@ export function usePopoverPosition({
   return useFloating({
     middleware,
     placement: seedPlacement,
+    strategy: 'fixed',
     whileElementsMounted: freeze
       ? undefined
       : (reference, floating, update) =>