OZG-725-7934 opt layout

alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts

@@ -57,27 +57,27 @@ type TextInputVariants = VariantProps<typeof textInputVariants>;
       <label *ngIf="showLabel" [for]="id" class="text-md mb-2 block font-medium text-text">
         {{ inputLabel }}<ng-container *ngIf="required"><i aria-hidden="true">*</i></ng-container>
       </label>
-      <div class="mt-2">
-        <div *ngIf="withPrefix" class="pointer-events-none absolute bottom-2 left-2 flex size-6 items-center justify-center">
-          <ng-content select="[prefix]" />
-        </div>
-        <input
-          type="text"
-          [id]="id"
-          [formControl]="fieldControl"
-          [ngClass]="[textInputVariants({ variant }), withPrefix ? 'pl-10' : '', withSuffix ? 'pr-10' : '']"
-          [placeholder]="placeholder"
-          [autocomplete]="autocomplete"
-          [attr.aria-required]="required"
-          [attr.aria-invalid]="variant === 'error'"
-          [attr.data-test-id]="_dataTestId + '-text-input'"
-          (click)="clickEmitter.emit()"
-          #inputElement
-        />
-        <div *ngIf="withSuffix" class="absolute bottom-2 right-2 flex size-6 items-center justify-center">
-          <ng-content select="[suffix]" />
-        </div>
+
+      <div *ngIf="withPrefix" class="pointer-events-none absolute bottom-2 left-2 flex size-6 items-center justify-center">
+        <ng-content select="[prefix]" />
+      </div>
+      <input
+        type="text"
+        [id]="id"
+        [formControl]="fieldControl"
+        [ngClass]="[textInputVariants({ variant }), withPrefix ? 'pl-10' : '', withSuffix ? 'pr-10' : '']"
+        [placeholder]="placeholder"
+        [autocomplete]="autocomplete"
+        [attr.aria-required]="required"
+        [attr.aria-invalid]="variant === 'error'"
+        [attr.data-test-id]="_dataTestId + '-text-input'"
+        (click)="clickEmitter.emit()"
+        #inputElement
+      />
+      <div *ngIf="withSuffix" class="absolute bottom-2 right-2 flex size-6 items-center justify-center">
+        <ng-content select="[suffix]" />
       </div>
+
       <ng-content select="[error]"></ng-content>
     </div>
   `,

alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts

@@ -33,18 +33,14 @@ export enum ForwardingDirection {
   selector: 'ods-forwarding-item',
   standalone: true,
   imports: [ForwardVorgangIconComponent],
-  template: ` <div class="block h-full rounded-lg border border-grayborder">
-    <div class="flex flex-col items-start justify-between gap-2 p-3 md:flex-row md:items-center md:gap-0">
-      <div class="flex flex-1 gap-3">
+  template: ` <div class="h-full rounded-lg border border-grayborder">
+    <div class="flex flex-col gap-3 p-3 align-top sm:flex-row">
+      <div class="flex gap-3">
         <ods-forward-vorgang-icon class="fill-text" />
-        <p class="text-gray-500">{{ direction }}:</p>
-        <div class="mt-[-8px] w-full">
-          <ng-content />
-        </div>
-      </div>
-      <div class="text-end empty:hidden">
-        <ng-content select="[end-content]" />
+        <div class="font-medium text-gray-500">{{ direction }}:</div>
       </div>
+      <div class="grow"><ng-content /></div>
+      <div class="flex items-center"><ng-content select="[end-content]" /></div>
     </div>
   </div>`,
 })

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.html

-<div class="w-[860px] flex flex-col max-w-full max-h-full rounded-lg bg-background-50 p-8 ">
-  <div class="flex items-center justify-between mb-4">
-    <h1 class="text-xl font-semibold text-primary">Vorgang weiterleiten</h1>
+<div class="flex max-h-full w-[860px] max-w-full flex-col rounded-lg bg-background-50 p-6 shadow-md">
+  <div class="mb-4 flex items-center justify-between">
+    <h1 class="text-lg font-medium text-primary">Vorgang weiterleiten</h1>
     <ods-cancel-dialog-button showAsIconButton="true" />
   </div>