OZG-7473-7959 ui layout

alfa-client/libs/admin/aggregation-mapping/src/lib/aggregation-mapping-form-container/aggregation-mapping-form/aggregation-mapping-field-list-form/aggregation-mapping-field-form/aggregation-mapping-field-form.component.html

 <form [formGroup]="formService.form">
   <ng-container [formArrayName]="AggregationMappingFormService.FIELD_MAPPINGS">
     <ng-container [formGroupName]="index">
-      <div class="flex w-full flex-col gap-2 mt-4 bg-background-100 p-4 rounded-md">
+      <div class="mt-4 flex w-full flex-col rounded-md bg-background-150 p-4">
         <div class="flex flex-row items-center justify-between">
-          <p class="text-md mb-2 block font-medium text-text">Datenfeld</p>
+          <p class="mb-2 block text-lg font-medium text-text">Datenfeld</p>
           <ods-button
             class="self-end"
             variant="ghost"
@@ -16,8 +16,8 @@
             <ods-delete-icon icon />
           </ods-button>
         </div>
+        <div class="flex flex-col gap-4">
           <ods-text-editor
-          class="flex-1"
             formControlName="sourcePath"
             label="Pfad"
             placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
@@ -26,7 +26,6 @@
             [attr.data-test-id]="'source-mapping-field-' + index"
           ></ods-text-editor>
           <ods-text-editor
-          class="flex-1"
             formControlName="targetPath"
             label="Zielfeld"
             isRequired="true"
@@ -35,6 +34,7 @@
             [attr.data-test-id]="'target-mapping-field-' + index"
           ></ods-text-editor>
         </div>
+      </div>
     </ng-container>
   </ng-container>
 </form>

alfa-client/libs/admin/aggregation-mapping/src/lib/aggregation-mapping-form-container/aggregation-mapping-form/aggregation-mapping-form.component.html

@@ -2,8 +2,10 @@
 
 <ods-spinner [stateResource]="aggregationMappingStateResource$ | async">
   <div class="flex max-w-4xl flex-col gap-4">
-    <form class="form flex-col" [formGroup]="formService.form" class="flex flex-col gap-2">
+    <form class="form flex-col" [formGroup]="formService.form" class="flex flex-col gap-4">
+      <div class="flex flex-col gap-4 lg:flex-row">
         <ods-text-editor
+          class="basis-1/2 lg:pr-2"
           [formControlName]="AggregationMappingFormService.FIELD_NAME"
           label="Name"
           placeholder=""
@@ -11,8 +13,10 @@
           data-test-id="aggregation-mapping-name-text-editor"
           dataTestId="aggregation-mapping-name"
         ></ods-text-editor>
-      <div [formGroupName]="AggregationMappingFormService.FIELD_FORM_IDENTIFIER" class="flex flex-col gap-4">
+      </div>
+      <div [formGroupName]="AggregationMappingFormService.FIELD_FORM_IDENTIFIER" class="flex flex-col gap-4 lg:flex-row">
         <ods-text-editor
+          class="flex-1"
           [formControlName]="AggregationMappingFormService.FIELD_FORM_ENGINE_NAME"
           label="Formengine"
           placeholder="Tragen Sie hier die Formengine des Formulars ein."
@@ -21,6 +25,7 @@
           dataTestId="form-engine-name"
         ></ods-text-editor>
         <ods-text-editor
+          class="flex-1"
           [formControlName]="AggregationMappingFormService.FIELD_FORM_ID"
           label="FormID"
           placeholder="Tragen Sie hier die FormID des Formulars ein."