Fix DropdownMenu positioning issue (#2812)

* fix(dropdown-menu): fix an issue with dropdown positioning

* chore: changeset added

.changeset/kind-countries-yell.md

@@ -0,0 +1,11 @@
+---
+'@commercetools-uikit/dropdown-menu': patch
+'@commercetools-uikit/data-table-manager': patch
+---
+
+We fixed an issue with the `DropdownMenu` component when using these values:
+
+* `menuPosition`: right
+* `menuHorizontalConstraint`: auto
+
+In that situation, the width and positioning of the floating menu was not correctly calculated.

packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx

@@ -52,19 +52,19 @@ function DropdownBaseMenu(props: TDropdownBaseMenuProps) {
     if (props.isOpen && props.triggerElementRef.current && menuRef.current) {
       const triggerElementCoordinates =
         props.triggerElementRef.current.getBoundingClientRect();
-      const menuElementCoordinates = menuRef.current.getBoundingClientRect();
 
       menuRef.current.style.top = `${
         triggerElementCoordinates.top + triggerElementCoordinates.height
       }px`;
-      menuRef.current.style.left =
-        props.menuPosition === 'left'
-          ? `${triggerElementCoordinates.left}px`
-          : `${
-              triggerElementCoordinates.left +
-              triggerElementCoordinates.width -
-              menuElementCoordinates.width
-            }px`;
+      if (props.menuPosition === 'left') {
+        menuRef.current.style.left = `${triggerElementCoordinates.left}px`;
+        menuRef.current.style.removeProperty('right');
+      } else {
+        menuRef.current.style.right = `${
+          window.innerWidth - triggerElementCoordinates.right
+        }px`;
+        menuRef.current.style.removeProperty('left');
+      }
       menuRef.current.style.maxHeight = props.menuMaxHeight
         ? `${props.menuMaxHeight}px`
         : `calc(${