diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html b/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
index 228c9808d45c6f5b81e47b178e21cfe28e4fe01c..24e3210d9ba5b2c063a56307b9757f281cf614da 100644
--- a/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
+++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
@@ -28,73 +28,75 @@
[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 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-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">
- <alfa-vorgang-bescheid-status
- *ngIf="vorgang.antragBewilligt !== null"
- [vorgang]="vorgang"
- data-test-id="vorgang-list-item-bescheid-status"
- ></alfa-vorgang-bescheid-status>
- </div>
- </div>
- <div class="flex flex-1 flex-col gap-1">
- <div data-test-id="name" class="break-all text-base font-medium">
- {{ vorgang.name }}
- </div>
- <div class="mt-1">
- <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
- </div>
- <div>
- <div class="flex flex-row gap-1">
- <div class="flex flex-shrink-0">
- <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon>
+ <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-text
+ [status]="vorgang.status"
+ data-test-class="status-text"
+ class="status-text"
+ ></alfa-vorgang-status-text>
+ </div>
+ <div class="ml-6 flex text-sm lg:mt-3">
+ <alfa-vorgang-bescheid-status
+ *ngIf="vorgang.antragBewilligt !== null"
+ [vorgang]="vorgang"
+ data-test-id="vorgang-list-item-bescheid-status"
+ ></alfa-vorgang-bescheid-status>
+ </div>
+ </div>
+ <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>
+ <div class="mt-1">
+ <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
+ </div>
+ <div>
+ <div class="flex flex-row gap-1">
+ <div class="flex flex-shrink-0">
+ <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon>
+ </div>
+ <div alfa-aktenzeichen [vorgang]="vorgang"></div>
+ </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>
+ </div>
+ <div>
+ <alfa-vorgang-next-frist-button
+ *ngIf="vorgang | hasLink: vorgangLinkRel.WIEDERVORLAGEN"
+ [vorgang]="vorgang"
+ class="wiedervorlagen"
+ ></alfa-vorgang-next-frist-button>
+ </div>
+
+ <div>
+ <ozgcloud-postfach-icon
+ data-test-class="postfach-icon"
+ *ngIf="vorgang.hasPostfachNachricht === true"
+ [showBadge]="vorgang.hasNewPostfachNachricht"
+ class="postfach-icon"
+ >
+ </ozgcloud-postfach-icon>
+ </div>
</div>
- <div alfa-aktenzeichen [vorgang]="vorgang"></div>
</div>
</div>
- </div>
- <div class="flex w-36 flex-none flex-col gap-2">
- <div>
- <alfa-vorgang-created-at class="eingang" [vorgang]="vorgang"></alfa-vorgang-created-at>
- </div>
- <div>
- <alfa-vorgang-next-frist-button
- *ngIf="vorgang | hasLink: vorgangLinkRel.WIEDERVORLAGEN"
+ <div class="flex-none">
+ <alfa-user-profile-in-vorgang-list-item-container
+ *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
+ data-test-id="vorgang-user-icon"
[vorgang]="vorgang"
- class="wiedervorlagen"
- ></alfa-vorgang-next-frist-button>
- </div>
-
- <div>
- <ozgcloud-postfach-icon
- data-test-class="postfach-icon"
- *ngIf="vorgang.hasPostfachNachricht === true"
- [showBadge]="vorgang.hasNewPostfachNachricht"
- class="postfach-icon"
- >
- </ozgcloud-postfach-icon>
+ class="user-icon"
+ ></alfa-user-profile-in-vorgang-list-item-container>
</div>
</div>
- <div class="w-10 flex-none">
- <alfa-user-profile-in-vorgang-list-item-container
- *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
- data-test-id="vorgang-user-icon"
- [vorgang]="vorgang"
- class="user-icon"
- ></alfa-user-profile-in-vorgang-list-item-container>
- </div>
</a>