Louisa mobile drawer UI fix (Shopify#2695)

* added horizontal and vertical padding in Mobile drawer

* vertical padding and horizontal padding work with large lists-need to fix padding w/out scrollbar

* all icons, links are aligned with the close button and shop icon on mobile

* horizontal and vertical paddings all equate to 3rem around Nav and utility links

* added padding to close button on l3 links, adjusted padding for social links

* fixed close button padding

assets/component-localization-form.css

@@ -118,7 +118,6 @@ noscript .localization-selector.link {
 }
 
 .localization-selector + .disclosure__list-wrapper {
-  margin-left: 1rem;
   opacity: 1;
   animation: animateLocalization var(--duration-default) ease;
 }
@@ -283,7 +282,7 @@ noscript .localization-selector.link {
 .menu-drawer__localization .localization-form__select {
   background-color: initial;
   margin-top: 0;
-  padding: 1.5rem 3.6rem 1.5rem 1rem;
+  padding: 1rem 3.6rem 1rem 0rem;
 }
 
 .menu-drawer__localization .localization-form {

assets/component-menu-drawer.css

@@ -90,7 +90,7 @@ details[open].menu-opening > .menu-drawer__submenu {
 }
 
 .menu-drawer__navigation {
-  padding: 5.6rem 0;
+  padding: 3rem 0;
 }
 
 .menu-drawer__inner-submenu {
@@ -116,7 +116,7 @@ details[open].menu-opening > .menu-drawer__submenu {
 }
 
 .menu-drawer__menu-item {
-  padding: 1.1rem 3.2rem;
+  padding: 1.1rem 3rem;
   text-decoration: none;
   font-size: 1.8rem;
 }
@@ -161,7 +161,7 @@ details[open].menu-opening > .menu-drawer__submenu {
 
 .menu-drawer__menu-item > .icon-arrow {
   position: absolute;
-  right: 2.5rem;
+  right: 3rem;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -184,7 +184,7 @@ details[open].menu-opening > .menu-drawer__submenu {
 
 .menu-drawer__close-button {
   margin-top: 1.5rem;
-  padding: 1.2rem 2.6rem;
+  padding: 1.2rem 2.6rem 1.2rem 3rem;
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -212,7 +212,7 @@ details[open].menu-opening > .menu-drawer__submenu {
 }
 
 .header--has-social .menu-drawer__utility-links {
-  padding: 2rem;
+  padding: 2rem 3rem;
 }
 
 @media screen and (max-width: 749px) {
@@ -223,23 +223,23 @@ details[open].menu-opening > .menu-drawer__submenu {
 
 @media screen and (max-width: 989px) {
   .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
-    padding: 2rem;
+    padding: 3rem;
   }
 }
 
 .menu-drawer__account {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  padding: 1.2rem;
+  padding: 1rem 0;
   font-size: 1.4rem;
   color: rgb(var(--color-foreground));
-  margin-bottom: 2rem;
+  margin-bottom: 0;
 }
 
 .menu-drawer__utility-links:has(ul:empty) .menu-drawer__account,
 .menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 .menu-drawer__account .icon-account {
@@ -254,12 +254,13 @@ details[open].menu-opening > .menu-drawer__submenu {
 
 .menu-drawer .list-social {
   justify-content: flex-start;
+  margin-left: -1.25rem
 }
 
 .menu-drawer .list-social:empty {
   display: none;
 }
 
 .menu-drawer .list-social__link {
-  padding: 1.3rem 1.25rem;
+  padding: 1.3rem 1.3rem;
 }

sections/header.liquid

@@ -36,7 +36,6 @@
     margin-left: -1.2rem;
   }
 
-
   {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%}
     .scrolled-past-header .header__heading-logo-wrapper {
       width: 75%;
@@ -93,8 +92,7 @@
 
 {%- style -%}
   .header {
-    padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
-    padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
+    padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;
   }
 
   .section-header {