diff --git a/alfa-client/apps/alfa/src/app/app.component.html b/alfa-client/apps/alfa/src/app/app.component.html index b10af37299a6874ab18519ed496e0366d18cb0bc..5582cffad737e43a89b6e23ab1d249c623b64438 100644 --- a/alfa-client/apps/alfa/src/app/app.component.html +++ b/alfa-client/apps/alfa/src/app/app.component.html @@ -27,7 +27,7 @@ <ozgcloud-spinner [stateResource]="apiRoot"> <alfa-header-container [apiRootStateResource]="apiRoot"></alfa-header-container> - <div class="relative ml-4 mt-16 flex flex-grow items-start justify-between"> + <div class="relative ml-4 flex flex-grow items-start justify-between sm:mt-16"> <div class="mat-app-background relative grow"><router-outlet></router-outlet></div> <section class="mat-app-background right-nav"> diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss index 0f988dfaacd575b371c4e302f847202aa0ea8fac..b1f84a9744bc98660ed044fe69254d1f67466cd4 100644 --- a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss +++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss @@ -24,13 +24,10 @@ @import 'variables'; :host { - position: sticky; + @apply flex items-center justify-end sm:sticky; top: $header-height; - height: 3rem; + min-height: 3rem; width: 100%; z-index: 2; - display: flex; - justify-content: flex-end; - align-items: center; padding: 0.25rem 0 0.25rem 1rem; } diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html index c947a1e4cb95a6d6817a0e3573f93a94d523943b..793e849467b752ea5fd45aff481fcf0c251ebed2 100644 --- a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html +++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html @@ -26,18 +26,15 @@ <h1 class="sr-only">Vorgangsliste</h1> <alfa-vorgang-filter-menu-container class="mat-app-background"></alfa-vorgang-filter-menu-container> -<div class="flex flex-row"> +<div class="flex flex-col sm:flex-row"> <alfa-vorgang-views-menu-container *ngIf="apiRootStateResource.resource" [apiRootResource]="apiRootStateResource.resource" - class="w-[15.5rem] flex-none" + class="w-full sm:w-[15.5rem] sm:flex-none" ></alfa-vorgang-views-menu-container> <main - *ngIf=" - apiRootStateResource?.resource | hasLink: apiRootLinkRel.ALLE_VORGAENGE; - else showNoRoleMessage - " + *ngIf="apiRootStateResource?.resource | hasLink: apiRootLinkRel.ALLE_VORGAENGE; else showNoRoleMessage" data-test-id="vorgaenge-list" class="flex flex-1 flex-col overflow-hidden border border-gray-200 dark:border-black" > diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss index d952c68d1953ff972cb66210cc322820ef8104b9..87e23be7f28a3dca26624225e384d3f13aa3568a 100644 --- a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss +++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss @@ -1,10 +1,9 @@ @import 'variables'; :host { + @apply self-start md:sticky; background-color: $background; padding: 0 1rem 0 0; - position: sticky; - align-self: flex-start; top: $header-height + $navigation-height; }