OZG-7292 vorgangliste responsive

alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html

@@ -28,22 +28,20 @@
   [attr.aria-label]="ariaLabel"
   routerLink="/vorgang/{{ vorgang | toResourceUri: vorgangLinkRel.VORGANG_WITH_EINGANG }}"
   [attr.data-test-id]="'vorgang-list-item-' + vorgang.name | convertForDataTest"
-  class="flex flex-row gap-4 border-b-2 border-gray-200 p-4 hover:shadow-[inset_1px_-1px_0_0_rgba(0,0,0,0.16)] dark:border-b dark:border-gray-300 dark:hover:shadow-[inset_1px_-1px_0_0_rgba(255,255,255,0.60)]"
+  class="flex flex-col gap-2 border-b-2 border-gray-200 p-4 hover:shadow-[inset_1px_-1px_0_0_rgba(0,0,0,0.16)] dark:border-b dark:border-gray-300 dark:hover:shadow-[inset_1px_-1px_0_0_rgba(255,255,255,0.60)] lg:flex-row lg:gap-4"
 >
-  <div class="flex w-32 flex-none flex-col">
+  <div class="flex grow flex-row gap-4">
+    <div class="flex flex-1 flex-col gap-4 lg:flex-row">
+      <div class="flex flex-none flex-row lg:w-32 lg:flex-col">
         <div class="flex items-center gap-3">
-      <alfa-vorgang-status-dot
-        [status]="vorgang.status"
-        diameter="12"
-        data-test-class="status-dot"
-      ></alfa-vorgang-status-dot>
+          <alfa-vorgang-status-dot [status]="vorgang.status" diameter="12" data-test-class="status-dot"></alfa-vorgang-status-dot>
           <alfa-vorgang-status-text
             [status]="vorgang.status"
             data-test-class="status-text"
             class="status-text"
           ></alfa-vorgang-status-text>
         </div>
-    <div class="ml-6 mt-3 flex text-sm">
+        <div class="ml-6 flex text-sm lg:mt-3">
           <alfa-vorgang-bescheid-status
             *ngIf="vorgang.antragBewilligt !== null"
             [vorgang]="vorgang"
@@ -51,7 +49,7 @@
           ></alfa-vorgang-bescheid-status>
         </div>
       </div>
-  <div class="flex flex-1 flex-col gap-1">
+      <div class="ml-6 flex flex-1 flex-col gap-1 lg:ml-0">
         <div data-test-id="name" class="break-all text-base font-medium">
           {{ vorgang.name }}
         </div>
@@ -67,6 +65,7 @@
           </div>
         </div>
       </div>
+      <div class="ml-6 flex w-48 gap-4 lg:ml-0">
         <div class="flex w-36 flex-none flex-col gap-2">
           <div>
             <alfa-vorgang-created-at class="eingang" [vorgang]="vorgang"></alfa-vorgang-created-at>
@@ -89,7 +88,9 @@
             </ozgcloud-postfach-icon>
           </div>
         </div>
-  <div class="w-10 flex-none">
+      </div>
+    </div>
+    <div class="flex-none">
       <alfa-user-profile-in-vorgang-list-item-container
         *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
         data-test-id="vorgang-user-icon"
@@ -97,4 +98,5 @@
         class="user-icon"
       ></alfa-user-profile-in-vorgang-list-item-container>
     </div>
+  </div>
 </a>