OZG-7292 wrap header

alfa-client/libs/navigation/src/lib/header-container/header/header.component.html

@@ -24,20 +24,15 @@
 
 -->
 <header data-test-id="header">
-  <div class="left">
+  <div class="flex self-end sm:ml-3 sm:self-center lg:min-w-60">
     <alfa-header-logo></alfa-header-logo>
   </div>
-  <div class="middle">
+  <div class="grow sm:order-2 sm:mr-4 lg:w-full">
     <alfa-vorgang-search-container></alfa-vorgang-search-container>
   </div>
-  <div class="flex items-center text-ozggray-800 dark:text-ozggray-300">
-    <alfa-help-menu
-      [apiRootStateResource]="apiRootStateResource"
-      data-test-id="help-menu"
-    ></alfa-help-menu>
+  <div class="flex flex-1 items-center justify-end self-end text-ozggray-800 dark:text-ozggray-300 sm:order-3 sm:self-center">
+    <alfa-help-menu [apiRootStateResource]="apiRootStateResource" data-test-id="help-menu"></alfa-help-menu>
     <alfa-user-settings-container data-test-id="user-settings"></alfa-user-settings-container>
-    <alfa-user-profile-in-header-container
-      data-test-id="current-user"
-    ></alfa-user-profile-in-header-container>
+    <alfa-user-profile-in-header-container data-test-id="current-user"></alfa-user-profile-in-header-container>
   </div>
 </header>

alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss

@@ -26,30 +26,13 @@
 @import 'variables';
 
 header {
-  height: $header-height;
+  @apply flex flex-row flex-wrap content-between items-center gap-2 pb-2 pl-4 pr-4 pt-2 sm:fixed sm:flex-nowrap sm:content-between sm:gap-0 sm:pr-8;
+
+  min-height: $header-height;
   box-shadow: $shadow-bottom;
-  padding: 0.5rem 2rem 0.5rem 1rem;
   left: 0;
   top: 0;
   right: 0;
   width: 100%;
   z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: fixed;
-}
-
-.middle {
-  flex-grow: 1;
-  margin-right: 1rem;
-}
-
-.left {
-  display: flex;
-  align-items: inherit;
-  margin-left: 0.75rem;
-  @include media('>desktop') {
-    min-width: 240px;
-  }
 }