header layout fix

src/app/components/header/header.component.html

@@ -24,6 +24,11 @@
             {{ 'header.contacts' | translate }}
           </a>
         </div>
+
+        <div class="novo-mobile-controls">
+          <app-region-selector />
+          <app-language-selector />
+        </div>
       </nav>
 
       <div class="novo-right">
@@ -41,7 +46,7 @@
           }
         </a>
         
-        <button class="menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen" [attr.aria-label]="menuOpen ? 'Close menu' : 'Open menu'" [attr.aria-expanded]="menuOpen">
+        <button class="menu-toggle novo-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen" [class.novo-active]="menuOpen" [attr.aria-label]="menuOpen ? 'Close menu' : 'Open menu'" [attr.aria-expanded]="menuOpen">
           <span></span>
           <span></span>
           <span></span>
@@ -177,14 +182,13 @@
         </svg>
       </a>
 
-      <!-- Region Selector in mobile menu -->
-      <div class="dexar-mobile-lang">
-        <app-region-selector />
-      </div>
-
-      <!-- Language Selector in mobile menu -->
-      <div class="dexar-mobile-lang">
-        <app-language-selector />
+      <div class="dexar-mobile-controls">
+        <div class="dexar-mobile-lang">
+          <app-region-selector />
+        </div>
+        <div class="dexar-mobile-lang">
+          <app-language-selector />
+        </div>
       </div>
     </div>
 }

src/app/components/header/header.component.scss

@@ -328,6 +328,10 @@
   gap: 1.5rem;
 }
 
+.novo-mobile-controls {
+  display: none;
+}
+
 .novo-cart {
   position: relative;
   color: var(--text-primary);
@@ -409,7 +413,8 @@
     transition: max-height 0.3s;
     
     &.novo-nav-open {
-      max-height: 300px;
+      max-height: calc(100dvh - 65px);
+      overflow-y: auto;
     }
     
     .novo-nav-links {
@@ -435,6 +440,25 @@
     }
   }
 
+  .novo-right {
+    flex: 0 0 auto;
+    gap: 0.75rem;
+  }
+
+  .novo-right > app-region-selector,
+  .novo-right > app-language-selector {
+    display: none;
+  }
+
+  .novo-mobile-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 1rem 2rem 1.25rem;
+    border-top: 1px solid var(--border-color);
+  }
+  
   .novo-menu-toggle {
     display: flex;
   }
@@ -714,10 +738,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 16px;
+}
+
+.dexar-mobile-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  margin-top: 4px;
 }
 
 .dexar-menu-toggle {
+  position: relative;
+  z-index: 1001;
   display: none;
   flex-direction: column;
   gap: 5px;
@@ -841,7 +875,7 @@
   
   // Hide desktop language selector
   .dexar-lang-desktop {
-    display: none;
+    display: none !important;
   }
   
   .dexar-search-wrapper {
@@ -903,9 +937,10 @@
     transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
 
     &.dexar-mobile-menu-open {
-      max-height: 700px;
+      max-height: calc(100dvh - 84px);
       padding: 28px 20px 32px;
       opacity: 1;
+      overflow-y: auto;
     }
   }
 
@@ -914,8 +949,8 @@
     max-width: 100%;
   }
 
-  .dexar-mobile-lang {
-    margin-top: 16px;
+  .dexar-mobile-controls {
+    margin-top: 4px;
   }
 }
 

src/app/components/language-selector/language-selector.component.scss

@@ -262,13 +262,17 @@
 // Inside mobile menu: use inline dropdown instead of absolute
 // to avoid being clipped by overflow: hidden on the menu panel
 :host-context(.dexar-mobile-menu),
-:host-context(.dexar-mobile-lang) {
+:host-context(.dexar-mobile-lang),
+:host-context(.novo-mobile-controls) {
   .language-selector {
     width: auto;
     height: auto;
+    flex-wrap: wrap;
+    justify-content: center;
   }
 
-  .language-dropdown {
+  .language-dropdown,
+  .currency-dropdown {
     position: static;
     opacity: 1;
     visibility: hidden;
@@ -289,7 +293,8 @@
     }
   }
 
-  .language-option {
+  .language-option,
+  .currency-option {
     color: #1e3c38;
     
     &:hover:not(.disabled) {