Merge pull request #627 from maykinmedia/fix/1451-fix-alignment-mobile-productview

💄 [#1451] Fix alignments in mobile productview

Author: alextreme

src/open_inwoner/scss/components/Header/AnchorMenu.scss

@@ -65,7 +65,7 @@
 
   .link {
     box-sizing: border-box;
-    padding: var(--spacing-large);
+    padding: var(--spacing-large) var(--spacing-medium);
 
     @media (min-width: 768px) {
       border-left: var(--border-width) solid;
@@ -111,7 +111,7 @@
         font-size: var(--font-size-heading-3);
         color: var(--font-color-body);
         justify-content: space-between;
-        padding: var(--spacing-extra-large) var(--spacing-large);
+        padding: var(--spacing-extra-large) var(--spacing-medium);
         width: 100%;
       }
     }

src/open_inwoner/scss/components/Header/Header.scss

@@ -5,12 +5,11 @@ $hm: max(calc((100vw - var(--container-width)) / 2), var(--spacing-large));
 $vm: var(--spacing-large);
 
 .header {
-  z-index: 1003;
   position: static;
-  top: 0;
   min-height: 100px;
   background-color: var(--color-white);
-  width: calc(100% - var(--spacing-large));
+  width: 100%;
+  z-index: 1003;
 
   @media (min-width: 768px) {
     position: relative;
@@ -239,11 +238,12 @@ $vm: var(--spacing-large);
     display: none;
   }
   .header__button .header__menu-icon .closed {
-    height: 15px;
+    height: var(--font-size-body);
     width: 100%;
     color: var(--color-white);
     display: inline-block;
     font-size: var(--font-size-body);
+    line-height: var(--font-size-body);
   }
 
   .primary-navigation {
@@ -365,7 +365,7 @@ $vm: var(--spacing-large);
   .form {
     @media (max-width: 767px) {
       width: 100%;
-      gap: var(--spacing-medium);
+      gap: var(--spacing-small);
     }
 
     .form__actions {
@@ -388,6 +388,7 @@ $vm: var(--spacing-large);
 
   .form {
     padding: 0 0 var(--spacing-medium) 0;
+    gap: var(--spacing-small);
   }
 
   @media (min-width: 768px) {
@@ -432,10 +433,12 @@ $vm: var(--spacing-large);
             .header__menu-icon .open {
               //height: var(--row-height);
               width: 100%;
+              height: var(--font-size-body);
               background-color: var(--color-white);
               color: var(--color-primary);
               display: inline-block;
               font-size: var(--font-size-body);
+              line-height: var(--font-size-body);
             }
 
             .header__menu-icon .closed {