From d776c7c77d68f8c774fa3230bf43c1d88c594527 Mon Sep 17 00:00:00 2001
From: Soumyajit Chakraborty <51930458+Isoumyajit@users.noreply.github.com>
Date: Wed, 2 Jul 2025 17:33:37 +0530
Subject: [PATCH] AAE-35310  Displaying different text fields on an eform
 doesn't align vertically or horizontally (#10979)

* AAE-35310 fixing vertical or horizontal alignment issues

* AAE-35310 refactoring code and removed manual scss with flexboxes
---
 .../lib/form/components/form-renderer.component.scss  |  4 ++--
 .../form-section/form-section.component.scss          |  7 +++----
 .../form/components/widgets/amount/amount.widget.html |  2 +-
 .../form/components/widgets/amount/amount.widget.scss |  7 ++++++-
 .../components/widgets/checkbox/checkbox.widget.html  |  6 ++++--
 .../components/widgets/checkbox/checkbox.widget.scss  | 11 +++++++++++
 .../components/widgets/checkbox/checkbox.widget.ts    |  1 +
 .../widgets/date-time/date-time.widget.html           |  2 +-
 .../widgets/date-time/date-time.widget.scss           |  6 ++++++
 .../lib/form/components/widgets/date/date.widget.html |  2 +-
 .../lib/form/components/widgets/date/date.widget.scss |  9 +++++++++
 .../lib/form/components/widgets/date/date.widget.ts   |  1 +
 .../components/widgets/decimal/decimal.component.html |  2 +-
 .../components/widgets/decimal/decimal.component.scss |  6 ++++++
 .../widgets/multiline-text/multiline-text.widget.scss |  3 +++
 .../form/components/widgets/number/number.widget.html |  2 +-
 .../form/components/widgets/number/number.widget.scss |  6 ++++++
 .../lib/form/components/widgets/text/text.widget.html |  2 +-
 .../lib/form/components/widgets/text/text.widget.scss |  6 ++++++
 .../components/widgets/date/date-cloud.widget.html    |  2 +-
 .../components/widgets/date/date-cloud.widget.scss    |  6 ++++++
 .../display-rich-text/display-rich-text.widget.scss   |  2 --
 .../radio-buttons/radio-buttons-cloud.widget.scss     |  3 +--
 23 files changed, 78 insertions(+), 20 deletions(-)
 create mode 100644 lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss
 create mode 100644 lib/core/src/lib/form/components/widgets/date/date.widget.scss

diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss
index 903c762f63..977426acf6 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -67,8 +67,6 @@
                 width: 100%;
                 flex-grow: 1;
                 box-sizing: border-box;
-                padding-left: 1%;
-                padding-right: 1%;
             }
         }
 
@@ -76,6 +74,8 @@
             display: flex;
             flex-direction: column;
             flex: 1 1 auto;
+            padding-right: 1%;
+            padding-left: 1%;
         }
 
         &-item {
diff --git a/lib/core/src/lib/form/components/form-section/form-section.component.scss b/lib/core/src/lib/form/components/form-section/form-section.component.scss
index 8181567b2a..59b2562c35 100644
--- a/lib/core/src/lib/form/components/form-section/form-section.component.scss
+++ b/lib/core/src/lib/form/components/form-section/form-section.component.scss
@@ -2,8 +2,9 @@
     &-section {
         &-single-column {
             display: flex;
-            flex-wrap: wrap;
-            align-items: flex-start;
+            flex-wrap: inherit;
+            align-items: baseline;
+            gap: 1%;
         }
 
         &-column-view-item {
@@ -11,8 +12,6 @@
             display: flex;
             flex-grow: 1;
             box-sizing: border-box;
-            padding-left: 1%;
-            padding-right: 1%;
         }
     }
 }
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
index 4248c70681..12aba25f05 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
@@ -9,7 +9,7 @@
             >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
         >
     </div>
-    <div>
+    <div class="adf-amount-widget-container">
         <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
             @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
             <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
index 3a0e775ee7..938a242fae 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
@@ -4,11 +4,16 @@
 .adf {
     &-amount-widget {
         width: 100%;
-        margin-top: 15px;
 
         .adf-left-label {
             line-height: 36px;
         }
+
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
     }
 
     &-amount-widget__input {
diff --git a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
index 6f9c17fd4f..520cefbd4c 100644
--- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
+++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
@@ -1,5 +1,6 @@
 <div [ngClass]="field.className"
-     [class.adf-invalid]="!field.isValid && isTouched()">
+     [class.adf-invalid]="!field.isValid && isTouched()" class="adf-checkbox-widget-container"
+>
     <mat-checkbox [id]="field.id"
                   color="primary"
                   class="adf-checkbox"
@@ -8,7 +9,8 @@
                   [(ngModel)]="field.value"
                   (ngModelChange)="onFieldChanged(field)"
                   [title]="field.tooltip"
-                  (click)="markAsTouched()">
+                  (click)="markAsTouched()"
+                  >
         {{ field.name | translate }}
         <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
     </mat-checkbox>
diff --git a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss
new file mode 100644
index 0000000000..feea319457
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss
@@ -0,0 +1,11 @@
+.adf {
+    &-checkbox {
+        &-widget {
+            &-container {
+                display: flex;
+                align-items: flex-start;
+                flex-direction: column;
+            }
+        }
+    }
+}
diff --git a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts
index 78bc359cba..8a07bccd23 100644
--- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts
+++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts
@@ -30,6 +30,7 @@ import { WidgetComponent } from '../widget.component';
     selector: 'checkbox-widget',
     standalone: true,
     templateUrl: './checkbox.widget.html',
+    styleUrl: './checkbox.widget.scss',
     styles: [
         `
             .adf-checkbox {
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
index 9e616f5fe8..ec1c68d82b 100644
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
@@ -7,7 +7,7 @@
             {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
-    <div>
+    <div class="adf-date-time-widget-container">
         <mat-form-field class="adf-date-time-widget adf-form-field-input"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
                         [floatLabel]="field.placeholder ? 'always' : null">
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
index d98c9ff174..67284b0088 100644
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
@@ -3,6 +3,12 @@
 
 .adf {
     &-date-time-widget {
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
         #{ms.$mat-form-field-suffix} {
             top: 26px;
         }
diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html
index 11115c3044..c3815b15e1 100644
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html
@@ -1,4 +1,4 @@
-<div class="{{ field.className }}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
+<div class="{{ field.className }} date-widget-container" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
     <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
         <mat-label class="adf-label"
                    [id]="field.id + '-label'"
diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.scss b/lib/core/src/lib/form/components/widgets/date/date.widget.scss
new file mode 100644
index 0000000000..0b1838d10c
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.scss
@@ -0,0 +1,9 @@
+.adf {
+    &-widget {
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+    }
+}
diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.ts b/lib/core/src/lib/form/components/widgets/date/date.widget.ts
index 4ed1cfa135..509afebb03 100644
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.ts
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.ts
@@ -42,6 +42,7 @@ import { ReactiveFormWidget } from '../reactive-widget.interface';
         { provide: DateAdapter, useClass: AdfDateFnsAdapter }
     ],
     templateUrl: './date.widget.html',
+    styleUrl: './date.widget.scss',
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',
diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
index 10bfafe73e..f51f1e4c6d 100644
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
@@ -8,7 +8,7 @@
         </label>
     </div>
 
-    <div>
+    <div class="adf-decimal-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
            @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
             <input matInput
diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss
index 863f8aafb6..256588156f 100644
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss
+++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss
@@ -2,6 +2,12 @@
     &-decimal-widget {
         width: 100%;
 
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
         .adf-label {
             top: 20px;
         }
diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
index 50b075dcd9..0be597f3e0 100644
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
@@ -1,6 +1,9 @@
 .adf {
     &-multiline-text-widget {
         width: 100%;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
 
         .adf-label {
             top: 20px;
diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.html b/lib/core/src/lib/form/components/widgets/number/number.widget.html
index 6d642566cd..8f5749b960 100644
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.html
+++ b/lib/core/src/lib/form/components/widgets/number/number.widget.html
@@ -8,7 +8,7 @@
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
-    <div>
+    <div class="adf-number-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
             @if( (field.name || this.field?.required) && !field.leftLabels) {
             <mat-label class="adf-label" [attr.for]="field.id">
diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.scss b/lib/core/src/lib/form/components/widgets/number/number.widget.scss
index 59276a274e..f272f89e91 100644
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/number/number.widget.scss
@@ -2,6 +2,12 @@
     &-number-widget {
         width: 100%;
 
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
         .adf-label {
             top: 20px;
         }
diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.html b/lib/core/src/lib/form/components/widgets/text/text.widget.html
index 8ea1c81deb..4ff765d9d0 100644
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.html
+++ b/lib/core/src/lib/form/components/widgets/text/text.widget.html
@@ -7,7 +7,7 @@
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
-    <div>
+    <div class="adf-text-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
             @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}
diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.scss b/lib/core/src/lib/form/components/widgets/text/text.widget.scss
index b8b622a419..2544387edf 100644
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/text/text.widget.scss
@@ -8,5 +8,11 @@
         #{ms.$mat-form-field-label} {
             top: 20px;
         }
+
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
     }
 }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
index 5102a5f58a..8c8c243986 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
@@ -13,7 +13,7 @@
             ></label
         >
     </div>
-    <div>
+    <div class="adf-date-widget-container">
         <mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
             @if ( (field.name || field?.required) && !field.leftLabels) {
                 <mat-label class="adf-label" [attr.for]="field.id">
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
index 63073c09de..39b34007b2 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
@@ -11,6 +11,12 @@
         .adf-label {
             top: 20px;
         }
+
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
     }
 
     &-left-label-input-datepicker {
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss
index 1880db3e82..41a3bc0e5a 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss
@@ -1,6 +1,4 @@
 .adf-display-rich-text-widget {
-    padding: 10px;
-
     pre {
         min-height: 100px;
         font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss
index 162f81f2ab..a2a0b68b4d 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss
@@ -9,7 +9,6 @@
     }
 
     &-radio-button-container {
-        margin-bottom: 15px;
         display: flex;
         flex-direction: column;
 
@@ -23,7 +22,7 @@
     &-radio-button-container-horizontal {
         margin-bottom: 15px;
         display: flex;
-        flex-flow: row wrap;
+        flex-flow: column wrap;
         align-items: flex-start;
         justify-content: flex-start;