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,24 +16,24 @@
             <ods-delete-icon icon />
           </ods-button>
         </div>
-        <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."
-          isRequired="true"
-          [dataTestId]="'source-mapping-field-' + index"
-          [attr.data-test-id]="'source-mapping-field-' + index"
-        ></ods-text-editor>
-        <ods-text-editor
-          class="flex-1"
-          formControlName="targetPath"
-          label="Zielfeld"
-          isRequired="true"
-          placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
-          [dataTestId]="'target-mapping-field-' + index"
-          [attr.data-test-id]="'target-mapping-field-' + index"
-        ></ods-text-editor>
+        <div class="flex flex-col gap-4">
+          <ods-text-editor
+            formControlName="sourcePath"
+            label="Pfad"
+            placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
+            isRequired="true"
+            [dataTestId]="'source-mapping-field-' + index"
+            [attr.data-test-id]="'source-mapping-field-' + index"
+          ></ods-text-editor>
+          <ods-text-editor
+            formControlName="targetPath"
+            label="Zielfeld"
+            isRequired="true"
+            placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
+            [dataTestId]="'target-mapping-field-' + index"
+            [attr.data-test-id]="'target-mapping-field-' + index"
+          ></ods-text-editor>
+        </div>
       </div>
     </ng-container>
   </ng-container>

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

@@ -2,17 +2,21 @@
 
 <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">
-      <ods-text-editor
-        [formControlName]="AggregationMappingFormService.FIELD_NAME"
-        label="Name"
-        placeholder=""
-        isRequired="true"
-        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">
+    <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=""
+          isRequired="true"
+          data-test-id="aggregation-mapping-name-text-editor"
+          dataTestId="aggregation-mapping-name"
+        ></ods-text-editor>
+      </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."