Change template PreprocessStepComponent.

src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.sass

@@ -1,7 +1,8 @@
 
 .layout
-    max-width: 1000px
+    max-width: 1200px
     width: 100%
     margin-right: auto
     margin-left: auto
-    padding-bottom: 100px
+    padding: 0 30px 100px
+    position: relative

src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.html

@@ -1,29 +1,40 @@
-<div>
-    <h2 class="text-center">Preprocess</h2>
-    <div class="d-flex justify-content-center mt-4">
-        <div class="form-check">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                [(ngModel)]="showPreprocessStep"
-                (change)="onCheckedPreprocessStep($event)"
-                data-test-id="read-isAddPreprocessStep"
-            />
-            <label class="form-check-label"> Use Preprocess step </label>
-        </div>
+<h2 class="text-center">Preprocess</h2>
+<div class="d-flex justify-content-center flex-column align-items-center mt-4">
+    <div class="form-check">
+        <input
+            class="form-check-input"
+            type="checkbox"
+            [(ngModel)]="showPreprocessStep"
+            (change)="onCheckedPreprocessStep($event)"
+            data-test-id="read-isAddPreprocessStep"
+        />
+        <label class="form-check-label"> Use Preprocess step </label>
+    </div>
+    <div *ngIf="!showPreprocessStep" class="text-muted text-center fs-6 mt-2">
+        Enable preprocessing query, if you would like to transform your data
+        during the ingestion process
     </div>
-    <ng-container *ngIf="showPreprocessStep">
-        <div class="d-flex justify-content-center mb-4">
-            <app-engine-section
-                [currentSetTransformEvent]="setPollingSourceEvent?.preprocess"
-                [selectedEngine]="preprocessValue.engine"
-                (onEmitSelectedEngine)="onSelectEngine($event)"
-            ></app-engine-section>
+</div>
+
+<ng-container *ngIf="showPreprocessStep">
+    <div class="row">
+        <div class="col-lg-4 ps-4">
+            <div class="container-engine">
+                <app-engine-section
+                    [currentSetTransformEvent]="
+                        setPollingSourceEvent?.preprocess
+                    "
+                    [selectedEngine]="preprocessValue.engine"
+                    (onEmitSelectedEngine)="onSelectEngine($event)"
+                ></app-engine-section>
+            </div>
         </div>
-        <div class="container-queries">
-            <app-queries-section
-                [queries]="preprocessValue.queries"
-            ></app-queries-section>
+        <div class="col-lg-8">
+            <div class="mt-4 px-4">
+                <app-queries-section
+                    [queries]="preprocessValue.queries"
+                ></app-queries-section>
+            </div>
         </div>
-    </ng-container>
-</div>
+    </div>
+</ng-container>

src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.sass

@@ -1,2 +1,7 @@
 .container-queries
-    margin: 50px 50px 0
+    margin: 70px 0 0 50px
+
+.container-engine
+    margin: 85px 0 0 20px
+    display: flex
+    justify-content: center

src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.html

@@ -1,10 +1,10 @@
 <div class="mt-4" *ngIf="knownEngines">
     <p class="fs-6">Engine</p>
-    <mat-divider class="w-425"></mat-divider>
+    <mat-divider class="w-350"></mat-divider>
     <div class="mt-4">
         <label for="engine-type" class="form-label">Type</label>
         <select
-            class="form-select w-425"
+            class="form-select w-350"
             id="engine-type"
             [(ngModel)]="selectedEngine"
             (change)="onSelectType()"
@@ -20,7 +20,7 @@
     <div class="mt-4">
         <label for="engine-image" class="form-label">Image</label>
         <input
-            class="form-control w-425"
+            class="form-control w-350"
             id="engine-image"
             [(ngModel)]="selectedImage"
             [title]="selectedImage"

src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.html

@@ -5,7 +5,7 @@
         <div class="d-flex flex-row position-relative">
             <input
                 type="text"
-                class="form-control w-425"
+                class="form-control w-350"
                 data-test-id="searchInputDatasets"
                 #searchDatasets
                 placeholder="Look up a dataset..."

src/styles.sass

@@ -1040,8 +1040,8 @@ pre
     .mat-icon-button
       background-color: transparent !important
 
-.w-425
-  width: 370px!important
+.w-350
+  width: 350px!important
 
 .button-custom
   display: flex