fix: add top placement fix

Author: lisalupi

.changeset/little-buckets-thank.md

@@ -2,4 +2,4 @@
 "@ultraviolet/ui": patch
 ---
 
-`Menu` & `Popup`: when `placement='bottom'`, avoid negative values for "translate3d" to prevent negative positioning/x-overflow
+`Menu` & `Popup`: when `placement='bottom'` or `placement='top'`, avoid negative values for "translate3d" to prevent negative positioning/x-overflow

packages/ui/src/components/Popup/helpers.ts

@@ -455,6 +455,15 @@ export const computePositions = ({
         arrowWidth -
         SPACE
 
+      const computedPositionX = !isAligned
+        ? positionX + popupOverflow
+        : positionX
+
+      // To make sure the popup does not overflow (negative X position)
+      const finalPositionX = isPopupPortalTargetBody
+        ? Math.max(computedPositionX, 0)
+        : computedPositionX
+
       return {
         arrowLeft: isAligned
           ? childrenWidth / 2 - arrowWidth
@@ -463,11 +472,9 @@ export const computePositions = ({
         arrowTransform: '',
         placement: 'top',
         popupInitialPosition: `translate3d(${
-          !isAligned ? positionX + popupOverflow : positionX
+          finalPositionX
         }px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${
-          !isAligned ? positionX + popupOverflow : positionX
-        }px, ${positionY}px, 0)`,
+        popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
         rotate: 0,
       }
     }