Fix user menu dropdown in chrome && safari when user name is short

client/components/Nav/NavDropdownMenu.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo } from 'react';
+import { useFloating, autoUpdate, shift } from '@floating-ui/react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
 
@@ -19,11 +20,31 @@ export function useMenuProps(id) {
   return { isOpen, handlers };
 }
 
+const isSafari = () =>
+  /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 function NavDropdownMenu({ id, title, children }) {
   const { isOpen, handlers } = useMenuProps(id);
 
+  const middleware = isSafari()
+    ? [
+        shift({
+          mainAxis: false
+        })
+      ]
+    : [shift()];
+
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement: 'bottom-start',
+    middleware
+  });
+
   return (
-    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
+    <li
+      className={classNames('nav__item', isOpen && 'nav__item--open')}
+      ref={refs.setReference}
+    >
       <button {...handlers}>
         <span className="nav__item-header">{title}</span>
         <TriangleIcon
@@ -32,7 +53,11 @@ function NavDropdownMenu({ id, title, children }) {
           aria-hidden="true"
         />
       </button>
-      <ul className="nav__dropdown">
+      <ul
+        className="nav__dropdown"
+        ref={refs.setFloating}
+        style={floatingStyles}
+      >
         <ParentMenuContext.Provider value={id}>
           {children}
         </ParentMenuContext.Provider>

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -501,6 +501,7 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
           >
             <li
               class="nav__dropdown-item"
@@ -528,6 +529,7 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
           >
             <li
               class="nav__dropdown-item"
@@ -584,6 +586,7 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
           >
             <li
               class="nav__dropdown-item"
@@ -642,6 +645,7 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
           >
             <li
               class="nav__dropdown-item"

client/styles/base/_base.scss

@@ -7,9 +7,12 @@
 html,
 body {
 	font-size: #{$base-font-size}px;
+	overflow: hidden;
 }
 
 
+
+
 /* Styles for non-touch devices */
 @media (hover: hover) and (pointer: fine) {
 	/*Scrollbar theming */

package.json

@@ -158,6 +158,7 @@
     "@babel/core": "^7.14.6",
     "@babel/register": "^7.14.5",
     "@emmetio/codemirror-plugin": "^1.2.4",
+    "@floating-ui/react": "^0.26.17",
     "@gatsbyjs/webpack-hot-middleware": "^2.25.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@redux-devtools/core": "^3.11.0",