Long option causes menu to open in wrong position issue (#837)

* Long option causes menu to open in wrong position issue
* updated the test file

Author: Nathan-Roberts123

src/components/Overlay/Overlay.test.tsx

@@ -99,15 +99,15 @@ describe('Overlay modifiers', () => {
     const props: ModifierProps = { align: 'justify', flip: false };
 
     const modifiers = getModifiers(props);
-    expect(modifiers).toHaveLength(2);
+    expect(modifiers).toHaveLength(3);
     expect(
       modifiers.find(({ name }) => name === 'setPopperWidth')
     ).toBeTruthy();
 
     props.align = 'left';
-    expect(getModifiers(props)).toHaveLength(1);
+    expect(getModifiers(props)).toHaveLength(2);
 
     props.align = 'right';
-    expect(getModifiers(props)).toHaveLength(1);
+    expect(getModifiers(props)).toHaveLength(2);
   });
 });

src/components/Overlay/useOverlay.ts

@@ -29,6 +29,12 @@ export function getModifiers(props: Pick<OverlayOptions, 'align' | 'flip'>) {
       enabled: !!props.flip,
       name: 'flip',
     },
+    {
+      name: 'preventOverflow',
+      options: {
+        mainAxis: false
+      }
+    }
   ];
 
   if (props.align !== 'right' && props.align !== 'left') {
@@ -63,7 +69,7 @@ export function useOverlay(
   );
 
   const refElementHeight = referenceElement?.offsetHeight;
-
+  
   // Re-position the popper if the height of the reference element changes.
   // Exclude `forceUpdate` from dependencies since it changes with each render.
   useEffect(() => {