fix(header): fix issue with header being full page height on mobile (#…

…209) * fix(header): fix issue with header being full page height on mobile fix issue with header being full page height on mobile Plus updated tablet breakpoint to match designs HEYUI-340 * update screenshots
hey-car · May 24, 2023 · 0401c56 · 0401c56 · github-actions · May 24, 2023
1 parent e61f6a0
commit 0401c56
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/header/src/styles/default.module.css b/packages/header/src/styles/default.module.css
@@ -7,8 +7,17 @@
   position: sticky;
   top: 0;
   left: 0;
-  width: 100%;
   z-index: 999;
+  width: 100%;
+  height: 64px;
+
+  @media (--tablet) {
+    height: 72px;
+  }
+
+  @media (--tablet-l) {
+    height: auto;
+  }
 
   @media (--desktop) {
     background: var(--color-primary-700);
@@ -26,6 +35,11 @@
   }
 
   @media (--tablet) {
+    padding-top: var(--spacing-5);
+    padding-bottom: var(--spacing-5);
+  }
+
+  @media (--tablet-l) {
     padding-top: var(--spacing-3);
     padding-bottom: var(--spacing-3);
   }