diff --git a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html b/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html
index 100cd3141dbcb8562608433313d8cdf30c0af56b..9a751f4936b1a4ae43d363257c96bd09410002bc 100644
--- a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html
+++ b/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>
diff --git a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss b/alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss
index 4e6bde87b4b462a01803569bc823015ce6b9f535..c90ad5c005b36189e95877755a5050f8790020a8 100644
--- a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/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;
- }
}