fix: OPTIC-2157: Actions Menu Disappears at High Browser Zoom Levels (#7479)

Co-authored-by: bmartel <[email protected]>
Co-authored-by: vladimirheartex <[email protected]>
Co-authored-by: yyassi-heartex <[email protected]>

Author: 3 people

web/libs/core/src/lib/utils/dom.ts

@@ -96,6 +96,7 @@ export const alignElements = (
   align: Align = "bottom-left",
   padding = 0,
   constrainHeight = false,
+  openUpwardForShortViewport = true,
 ) => {
   let offsetLeft = 0;
   let offsetTop = 0;
@@ -123,25 +124,25 @@ export const alignElements = (
     case "bottom-center":
       offsetTop = pos.bottom + padding;
       offsetLeft = pos.horizontalCenter;
-      maxHeight = window.scrollX + window.innerHeight - offsetTop;
+      maxHeight = window.scrollY + window.innerHeight - offsetTop;
       break;
     case "bottom-left":
       offsetTop = pos.bottom + padding;
       offsetLeft = pos.horizontalLeft;
-      maxHeight = window.scrollX + window.innerHeight - offsetTop;
+      maxHeight = window.scrollY + window.innerHeight - offsetTop;
       break;
     case "bottom-right":
       offsetTop = pos.bottom + padding;
       offsetLeft = pos.horizontalRight;
-      maxHeight = window.scrollX + window.innerHeight - offsetTop;
+      maxHeight = window.scrollY + window.innerHeight - offsetTop;
       break;
     default:
       break;
   }
 
-  if (offsetTop < window.scrollX) {
+  if (offsetTop < window.scrollY || !openUpwardForShortViewport) {
     offsetTop = pos.bottom + padding;
-    maxHeight = window.scrollX + window.innerHeight - offsetTop;
+    maxHeight = window.scrollY + window.innerHeight - offsetTop;
     resultAlign[0] = "bottom";
   }
   // If the dropdown has more space on the top, then we should align it to the top

web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx

@@ -18,7 +18,7 @@ export const Dropdown = React.forwardRef(({ animated = true, visible = false, ..
   const { triggerRef } = React.useContext(DropdownContext) ?? {};
   const isInline = triggerRef === undefined;
 
-  const { children, align, openUpwardForShortViewport } = props;
+  const { children, align, openUpwardForShortViewport, constrainHeight = false } = props;
   const [currentVisible, setVisible] = React.useState(visible);
   const [offset, setOffset] = React.useState({});
   const [visibility, setVisibility] = React.useState(visible ? "visible" : null);
@@ -31,11 +31,12 @@ export const Dropdown = React.forwardRef(({ animated = true, visible = false, ..
       dropdownEl,
       align ?? "bottom-left",
       0,
+      constrainHeight,
       openUpwardForShortViewport ?? true,
     );
 
     setOffset({ left, top });
-  }, [triggerRef]);
+  }, [triggerRef, align, openUpwardForShortViewport, constrainHeight]);
 
   const dropdownIndex = React.useMemo(() => {
     return lastIndex++;