From df82073e14740099d8d4388108db85b8acb76e0c Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Jun 2024 11:13:34 +0200
Subject: [PATCH] fix: Divider spacing in mobile dropdown

---
 .../Current/Header/MyPagesMobileDropdown/index.tsx   |  4 +++-
 .../my-pages-mobile-dropdown.module.css              | 12 ++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/Current/Header/MyPagesMobileDropdown/index.tsx b/components/Current/Header/MyPagesMobileDropdown/index.tsx
index 97bc9ac96..f79865496 100644
--- a/components/Current/Header/MyPagesMobileDropdown/index.tsx
+++ b/components/Current/Header/MyPagesMobileDropdown/index.tsx
@@ -39,7 +39,9 @@ export default function MyPagesMobileDropdown({
       </Title>
       {navigation.menuItems.map((menuItem, idx) => (
         <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
-          <Divider color="subtle" />
+          <div className={styles.dividerWrapper}>
+            <Divider color="subtle" />
+          </div>
           <ul className={styles.dropdownWrapper}>
             <ul className={styles.dropdownLinks}>
               {menuItem.links.map((link) => (
diff --git a/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css b/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css
index bd992b50d..f42c1dfad 100644
--- a/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css
+++ b/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css
@@ -19,7 +19,7 @@
 .dropdownWrapper {
   display: flex;
   width: 100%;
-  padding: 20px;
+  padding: 20px var(--Spacing-x2);
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
@@ -32,8 +32,16 @@
     0px 11px 24px 0px rgba(0, 0, 0, 0.1);
 }
 
+.dividerWrapper {
+  background-color: var(--Main-Grey-White);
+  padding: 0 var(--Spacing-x2);
+  margin: auto;
+  place-content: center;
+  display: flex;
+}
+
 .heading {
-  padding: 20px;
+  padding: 20px var(--Spacing-x2);
 }
 
 .dropdownLinks {