From 153ce7378fe4408bc174c6a61bb90d300e5feeff Mon Sep 17 00:00:00 2001
From: johanna-skylight <johanna@skylight.digital>
Date: Thu, 6 Feb 2025 11:05:18 -0500
Subject: [PATCH] Fixed positioning of the menu dropdown

---
 .../ui/components/header/header.module.scss   | 11 ++-
 .../src/app/ui/components/header/header.tsx   | 69 +++++++++----------
 2 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/query-connector/src/app/ui/components/header/header.module.scss b/query-connector/src/app/ui/components/header/header.module.scss
index d0d63bf4..efe83f1f 100644
--- a/query-connector/src/app/ui/components/header/header.module.scss
+++ b/query-connector/src/app/ui/components/header/header.module.scss
@@ -36,19 +36,17 @@
 }
 
 .menuDropdownContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
+  position: relative;
 }
 
-.menuDropdown {
+.menuDropdown{
   border-radius: 4px !important;
   padding: 0.5rem !important;
   background: $white !important;
-  margin: 10.5rem 2rem 0rem 0rem !important;
   width: 10rem !important;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+  top:-15px;
+  right:0px;
 }
 
 .menuItem {
@@ -79,7 +77,6 @@
 @media (max-width: 63.99em) {
   .menuDropdown {
     z-index: 400 !important;
-    position: absolute;
   }
 }
 
diff --git a/query-connector/src/app/ui/components/header/header.tsx b/query-connector/src/app/ui/components/header/header.tsx
index f09ce819..3f1ca230 100644
--- a/query-connector/src/app/ui/components/header/header.tsx
+++ b/query-connector/src/app/ui/components/header/header.tsx
@@ -124,42 +124,41 @@ const HeaderComponent: React.FC<{ authDisabled: boolean }> = ({
             )}
           </div>
         </div>
+        {showMenu && (
+          <div ref={menuRef} className={styles.menuDropdownContainer}>
+            <ul
+              id="dropdown-menu"
+              className={classNames(`usa-nav__submenu`, styles.menuDropdown)}
+            >
+              {/* TODO: Enable this once we can show/hide rules based on actual auth status */}
+              {/* {isProduction && ( */}
+              <>
+                <li className={styles.subMenuItem}>
+                  <Link className={styles.menuItem} href={"/queryBuilding"}>
+                    My queries
+                  </Link>
+                </li>
+                <li className={styles.subMenuItem}>
+                  <Link className={styles.menuItem} href={"/fhir-servers"}>
+                    FHIR Servers
+                  </Link>
+                </li>
+                <li className={styles.subMenuItem}>
+                  <Link className={styles.menuItem} href={"/userManagement"}>
+                    User Management
+                  </Link>
+                </li>
+                <li className={styles.subMenuItem}>
+                  <Link className={styles.menuItem} href={landingPage}>
+                    Log out
+                  </Link>
+                </li>
+              </>
+              {/* )} */}
+            </ul>
+          </div>
+        )}
       </header>
-
-      {showMenu && (
-        <div ref={menuRef} className={styles.menuDropdownContainer}>
-          <ul
-            id="dropdown-menu"
-            className={`usa-nav__submenu ${styles.menuDropdown}`}
-          >
-            {/* TODO: Enable this once we can show/hide rules based on actual auth status */}
-            {/* {isProduction && ( */}
-            <>
-              <li className={styles.subMenuItem}>
-                <Link className={styles.menuItem} href={"/queryBuilding"}>
-                  My queries
-                </Link>
-              </li>
-              <li className={styles.subMenuItem}>
-                <Link className={styles.menuItem} href={"/fhir-servers"}>
-                  FHIR Servers
-                </Link>
-              </li>
-              <li className={styles.subMenuItem}>
-                <Link className={styles.menuItem} href={"/userManagement"}>
-                  User Management
-                </Link>
-              </li>
-              <li className={styles.subMenuItem}>
-                <Link className={styles.menuItem} href={landingPage}>
-                  Log out
-                </Link>
-              </li>
-            </>
-            {/* )} */}
-          </ul>
-        </div>
-      )}
     </div>
   );
 };