scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Divider spacing in mobile dropdown

Browse Source
This commit is contained in:
Chuma McPhoy
2024-06-19 11:13:34 +02:00
committed by Michael Zetterberg
parent facff498ba
commit df82073e14
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -39,7 +39,9 @@ export default function MyPagesMobileDropdown({
</Title> </Title>
{navigation.menuItems.map((menuItem, idx) => ( {navigation.menuItems.map((menuItem, idx) => (
<Fragment key={`${menuItem.display_sign_out_link}-${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.dropdownWrapper}>
<ul className={styles.dropdownLinks}> <ul className={styles.dropdownLinks}>
{menuItem.links.map((link) => ( {menuItem.links.map((link) => (

12
components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css
View File

@@ -19,7 +19,7 @@
.dropdownWrapper { .dropdownWrapper {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 20px; padding: 20px var(--Spacing-x2);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
@@ -32,8 +32,16 @@
0px 11px 24px 0px rgba(0, 0, 0, 0.1); 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 { .heading {
padding: 20px; padding: 20px var(--Spacing-x2);
} }
.dropdownLinks { .dropdownLinks {