OZG-7292 page layout on smaller screens, scroll complete page

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">

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;
 }

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"
   >

alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss

 @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;
 }