fix: LEAP-1258: prevent dropdown from opening upward when viewport short (#6426)

Author: jombooth

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

@@ -17,15 +17,21 @@ export const Dropdown = React.forwardRef(({ animated = true, visible = false, ..
   const { triggerRef } = React.useContext(DropdownContext) ?? {};
   const isInline = triggerRef === undefined;
 
-  const { children, align } = props;
+  const { children, align, openUpwardForShortViewport } = props;
   const [currentVisible, setVisible] = React.useState(visible);
   const [offset, setOffset] = React.useState({});
   const [visibility, setVisibility] = React.useState(visible ? "visible" : null);
 
   const calculatePosition = React.useCallback(() => {
     const dropdownEl = dropdown.current;
     const parent = triggerRef?.current ?? dropdownEl.parentNode;
-    const { left, top } = alignElements(parent, dropdownEl, align ?? "bottom-left");
+    const { left, top } = alignElements(
+      parent,
+      dropdownEl,
+      align ?? "bottom-left",
+      0,
+      openUpwardForShortViewport ?? true,
+    );
 
     setOffset({ left, top });
   }, [triggerRef]);

web/libs/datamanager/src/components/Common/FieldsButton.jsx

@@ -73,6 +73,7 @@ export const FieldsButton = injector(
     selected,
     tooltip,
     tooltipTheme = "dark",
+    openUpwardForShortViewport = true,
   }) => {
     const content = [];
 
@@ -102,6 +103,7 @@ export const FieldsButton = injector(
           maxHeight: 280,
           overflow: "auto",
         }}
+        openUpwardForShortViewport={openUpwardForShortViewport}
       >
         {tooltip ? (
           <Elem name={"field-button"} style={{ zIndex: 1000 }}>

web/libs/datamanager/src/components/Common/FiltersPane.jsx

@@ -58,7 +58,12 @@ export const FiltersPane = injector(
     }, [sidebarEnabled]);
 
     return (
-      <Dropdown.Trigger ref={dropdown} disabled={sidebarEnabled} content={<Filters />}>
+      <Dropdown.Trigger
+        ref={dropdown}
+        disabled={sidebarEnabled}
+        content={<Filters />}
+        openUpwardForShortViewport={false}
+      >
         <FiltersButton {...rest} size={size} />
       </Dropdown.Trigger>
     );

web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx

@@ -163,6 +163,7 @@ export const TabsItem = ({
         {showMenu && (
           <Dropdown.Trigger
             align="bottom-left"
+            openUpwardForShortViewport={false}
             content={
               <TabsMenu
                 editable={tabIsEditable}

web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx

@@ -154,6 +154,7 @@ export const ActionsButton = injector(
             <Menu size="compact">{actionButtons}</Menu>
           )
         }
+        openUpwardForShortViewport={false}
         disabled={!hasSelected}
         onToggle={(visible) => isFFLOPSE3 && setIsOpen(visible)}
       >

web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.jsx

@@ -43,6 +43,7 @@ export const OrderButton = injector(({ size, ordering, view, ...rest }) => {
               </div>
             </Space>
           )}
+          openUpwardForShortViewport={false}
         />
 
         <Button

web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx

@@ -90,6 +90,7 @@ export const instruments = {
         title={"Columns"}
         size={size}
         style={style}
+        openUpwardForShortViewport={false}
       />
     );
   },

web/libs/datamanager/src/utils/dom.js

@@ -27,7 +27,7 @@ const positioner = (source, target) => {
   };
 };
 
-export const alignElements = (elem, target, align, padding = 0) => {
+export const alignElements = (elem, target, align, padding = 0, openUpwardForShortViewport = true) => {
   let offsetLeft = 0;
   let offsetTop = 0;
 
@@ -67,10 +67,10 @@ export const alignElements = (elem, target, align, padding = 0) => {
       break;
   }
 
-  if (offsetTop < window.scrollX) {
+  if (offsetTop < window.scrollY) {
     offsetTop = pos.bottom + padding;
     resultAlign[0] = "bottom";
-  } else if (offsetTop + pos.target.height > window.scrollX + window.innerHeight) {
+  } else if (openUpwardForShortViewport && offsetTop + pos.target.height > window.scrollY + window.innerHeight) {
     offsetTop = pos.top - padding;
     resultAlign[0] = "top";
   }