From 533eeec48f199aacd45ef0ab3bfffdaf4f050097 Mon Sep 17 00:00:00 2001
From: fairlight <31534717+fairlighteth@users.noreply.github.com>
Date: Mon, 30 Sep 2024 06:44:50 +0100
Subject: [PATCH] chore: fix settings menu styles (#4923)

* fix: styles for settings menu

* fix: styles for settings menu
---
 libs/ui/src/pure/MenuBar/index.tsx | 10 +++++-----
 libs/ui/src/pure/MenuBar/styled.ts |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/libs/ui/src/pure/MenuBar/index.tsx b/libs/ui/src/pure/MenuBar/index.tsx
index 26faa17f32..a93ee332f1 100644
--- a/libs/ui/src/pure/MenuBar/index.tsx
+++ b/libs/ui/src/pure/MenuBar/index.tsx
@@ -580,7 +580,7 @@ const GlobalSettingsDropdown = forwardRef<HTMLUListElement, GlobalSettingsDropdo
       {isOpen &&
         (mobileMode ? (
           <MobileDropdownContainer mobileMode={mobileMode} ref={ref as React.RefObject<HTMLDivElement>}>
-            <DropdownContent isOpen={true} alignRight={true} mobileMode={mobileMode} ref={ref}>
+            <DropdownContent isOpen={true} alignRight={true} mobileMode={mobileMode}>
               {settingsNavItems.map((item, index) => {
                 const to = item.external
                   ? appendUtmParams(item.href!, item.utmSource, item.utmContent, rootDomain, item.external, item.label)
@@ -598,9 +598,9 @@ const GlobalSettingsDropdown = forwardRef<HTMLUListElement, GlobalSettingsDropdo
                 )
 
                 return (
-                  <DropdownContentItemButton key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
+                  <StyledDropdownContentItem key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
                     {to ? <LinkComponent href={to}>{content}</LinkComponent> : <div>{content}</div>}
-                  </DropdownContentItemButton>
+                  </StyledDropdownContentItem>
                 )
               })}
             </DropdownContent>
@@ -622,9 +622,9 @@ const GlobalSettingsDropdown = forwardRef<HTMLUListElement, GlobalSettingsDropdo
               )
 
               return (
-                <DropdownContentItemButton key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
+                <StyledDropdownContentItem key={index} onClick={_onDropdownItemClickFactory(item, closeDropdown)}>
                   {to ? <LinkComponent href={to}>{content}</LinkComponent> : <div>{content}</div>}
-                </DropdownContentItemButton>
+                </StyledDropdownContentItem>
               )
             })}
           </DropdownContent>
diff --git a/libs/ui/src/pure/MenuBar/styled.ts b/libs/ui/src/pure/MenuBar/styled.ts
index 954546511d..e7d1c1395e 100644
--- a/libs/ui/src/pure/MenuBar/styled.ts
+++ b/libs/ui/src/pure/MenuBar/styled.ts
@@ -252,6 +252,7 @@ export const DropdownContent = styled.ul<DropdownContentProps>`
   backdrop-filter: blur(var(--blur));
   z-index: 1000;
   padding: ${({ isThirdLevel }) => (isThirdLevel ? '6px' : '6px')};
+  margin: 0;
   width: ${({ isThirdLevel }) => (isThirdLevel ? '100%' : '320px')};
   height: auto;
   border-radius: 28px;
@@ -328,7 +329,8 @@ export const MobileDropdownContainer = styled.div<{ mobileMode: boolean }>`
       scrollbar-color: var(--scrollbarColor) var(--scrollbarBackground);
       list-style: none;
 
-      > div {
+      > div,
+      > ul {
         width: 100%;
         position: relative;
         left: initial;
@@ -339,8 +341,6 @@ export const MobileDropdownContainer = styled.div<{ mobileMode: boolean }>`
         border-radius: 28px;
       }
 
-      /* For WebKit-based browsers (Chrome, Safari) */
-
       &::-webkit-scrollbar {
         width: 10px;
       }