From 66cbc58d89a172a08f5623dd34ab13e10b096363 Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Fri, 14 Jun 2024 00:39:54 +0530
Subject: [PATCH 1/3] implemented floating-ui working in chrome

---
 client/components/Nav/NavDropdownMenu.jsx | 18 ++++-
 package-lock.json                         | 99 +++++++++++++++++++++++
 package.json                              |  1 +
 3 files changed, 116 insertions(+), 2 deletions(-)

diff --git a/client/components/Nav/NavDropdownMenu.jsx b/client/components/Nav/NavDropdownMenu.jsx
index 7fb8eda34f..378f703871 100644
--- a/client/components/Nav/NavDropdownMenu.jsx
+++ b/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';
 
@@ -22,8 +23,17 @@ export function useMenuProps(id) {
 function NavDropdownMenu({ id, title, children }) {
   const { isOpen, handlers } = useMenuProps(id);
 
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement: 'bottom-start',
+    middleware: [shift()]
+  });
+
   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 +42,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>
diff --git a/package-lock.json b/package-lock.json
index 6f5890f1c8..e7a58d4090 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,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",
@@ -4645,6 +4646,54 @@
       "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
       "dev": true
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.17",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.17.tgz",
+      "integrity": "sha512-ESD+jYWwqwVzaIgIhExrArdsCL1rOAzryG/Sjlu8yaD3Mtqi3uVyhbE2V7jD58Mo52qbzKz2eUY/Xgh5I86FCQ==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.0",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -42978,6 +43027,11 @@
       "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/table": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
@@ -48419,6 +48473,46 @@
       "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
       "dev": true
     },
+    "@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "requires": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "requires": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "@floating-ui/react": {
+      "version": "0.26.17",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.17.tgz",
+      "integrity": "sha512-ESD+jYWwqwVzaIgIhExrArdsCL1rOAzryG/Sjlu8yaD3Mtqi3uVyhbE2V7jD58Mo52qbzKz2eUY/Xgh5I86FCQ==",
+      "requires": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.0",
+        "tabbable": "^6.0.0"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
+      "requires": {
+        "@floating-ui/dom": "^1.0.0"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -77583,6 +77677,11 @@
       "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
       "dev": true
     },
+    "tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "table": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
diff --git a/package.json b/package.json
index cea49d57c4..6255e451c8 100644
--- a/package.json
+++ b/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",

From 86ba0cec18d07cd244abbaa5ff978f901054f506 Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Sun, 16 Jun 2024 00:52:34 +0530
Subject: [PATCH 2/3] Fix user menu dropdown in chrome && safari when user name
 is short

---
 client/components/Nav/NavDropdownMenu.jsx | 15 +++++++++++++--
 client/styles/base/_base.scss             |  3 +++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/components/Nav/NavDropdownMenu.jsx b/client/components/Nav/NavDropdownMenu.jsx
index 378f703871..d89aecfb29 100644
--- a/client/components/Nav/NavDropdownMenu.jsx
+++ b/client/components/Nav/NavDropdownMenu.jsx
@@ -1,7 +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 { useFloating, autoUpdate, shift, limitShift } from '@floating-ui/react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
 
@@ -20,13 +20,24 @@ 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: [shift()]
+    middleware
   });
 
   return (
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 3e283d7ab9..63fcf97e7f 100644
--- a/client/styles/base/_base.scss
+++ b/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 */

From bf43a6ca59cf7811b1b488bc5da33e19bfbf7f84 Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Sun, 16 Jun 2024 10:25:53 +0530
Subject: [PATCH 3/3] fix snapshot

---
 client/components/Nav/NavDropdownMenu.jsx                     | 2 +-
 .../components/Header/__snapshots__/Nav.unit.test.jsx.snap    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/components/Nav/NavDropdownMenu.jsx b/client/components/Nav/NavDropdownMenu.jsx
index d89aecfb29..ee3e5082aa 100644
--- a/client/components/Nav/NavDropdownMenu.jsx
+++ b/client/components/Nav/NavDropdownMenu.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo } from 'react';
-import { useFloating, autoUpdate, shift, limitShift } from '@floating-ui/react';
+import { useFloating, autoUpdate, shift } from '@floating-ui/react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
 
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index 85387dd9ae..7044c59c0f 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/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"