fix: improve edit client form layout and button styling

- Reorganize first row to display 4 fields (Office, Legal Form, Account No, External ID)
- Center buttons with proper spacing (20px gap)
- Implement responsive design for all screen sizes
- Fix CSS lint errors and update to modern color function notation
- Remove inline styles following Angular best practices

src/app/clients/edit-client/edit-client.component.html

@@ -2,8 +2,9 @@
   <mat-card>
     <form [formGroup]="editClientForm">
       <mat-card-content>
-        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field class="flex-fill flex-23">
+        <!-- First Row: Office, Legal Form, Account No, External ID -->
+        <div class="responsive-row">
+          <mat-form-field class="flex-24">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -16,7 +17,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field class="flex-fill flex-23">
+          <mat-form-field class="flex-24">
             <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
             <mat-select formControlName="legalFormId">
               <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
@@ -25,16 +26,19 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field class="flex-fill flex-23">
+          <mat-form-field class="flex-24">
             <mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
             <input matInput formControlName="accountNo" />
           </mat-form-field>
 
-          <mat-form-field class="flex-fill flex-23">
+          <mat-form-field class="flex-24">
             <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
             <input matInput formControlName="externalId" />
           </mat-form-field>
+        </div>
 
+        <!-- Name fields section -->
+        <div class="responsive-row">
           <mat-form-field *ngIf="editClientForm.contains('fullname')" class="flex-48">
             <mat-label>{{
               'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
@@ -46,7 +50,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-48">
+          <mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-32">
             <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname" />
             <mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
@@ -55,12 +59,12 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-48">
+          <mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-32">
             <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
             <input matInput formControlName="middlename" />
           </mat-form-field>
 
-          <mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-48">
+          <mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-32">
             <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname" />
             <mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
@@ -68,9 +72,12 @@
               <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
+        </div>
 
-          <mat-divider></mat-divider>
+        <mat-divider class="section-divider"></mat-divider>
 
+        <!-- Date of Birth and Gender Row -->
+        <div class="responsive-row">
           <mat-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
             <mat-label>{{
               'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
@@ -88,7 +95,10 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
+        </div>
 
+        <!-- Staff and Is Staff Row -->
+        <div class="responsive-row align-center">
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
@@ -98,53 +108,6 @@
             </mat-select>
           </mat-form-field>
 
-          <div
-            class="flex-100 layout-row-wrap gap-2percent column-on-small"
-            formGroupName="clientNonPersonDetails"
-            *ngIf="editClientForm.contains('clientNonPersonDetails')"
-          >
-            <mat-form-field class="flex-48">
-              <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
-              <mat-select formControlName="constitutionId" required>
-                <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
-                  {{ constitution.name }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <mat-form-field class="flex-48">
-              <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
-              <mat-select formControlName="mainBusinessLineId">
-                <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
-                  {{ business.name }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
-              <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
-              <input
-                matInput
-                [min]="minDate"
-                [max]="maxDate"
-                [matDatepicker]="incorpValidityTillDateDatePicker"
-                formControlName="incorpValidityTillDate"
-              />
-              <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
-              <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
-            </mat-form-field>
-
-            <mat-form-field class="flex-48">
-              <mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
-              <input matInput formControlName="incorpNumber" />
-            </mat-form-field>
-
-            <mat-form-field class="flex-98">
-              <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
-              <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-            </mat-form-field>
-          </div>
-
           <mat-checkbox
             *ngIf="legalFormId === 1"
             class="flex-48 margin-v"
@@ -153,7 +116,57 @@
           >
             {{ 'labels.inputs.Is staff' | translate }}?
           </mat-checkbox>
+        </div>
 
+        <div
+          class="flex-100 layout-row-wrap gap-2percent column-on-small"
+          formGroupName="clientNonPersonDetails"
+          *ngIf="editClientForm.contains('clientNonPersonDetails')"
+        >
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
+            <mat-select formControlName="constitutionId" required>
+              <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
+                {{ constitution.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
+            <mat-select formControlName="mainBusinessLineId">
+              <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
+                {{ business.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="incorpValidityTillDateDatePicker"
+              formControlName="incorpValidityTillDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
+            <input matInput formControlName="incorpNumber" />
+          </mat-form-field>
+
+          <mat-form-field class="flex-98">
+            <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
+            <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+          </mat-form-field>
+        </div>
+
+        <!-- Mobile No and Email Address Row -->
+        <div class="responsive-row">
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
             <input matInput type="text" formControlName="mobileNo" />
@@ -164,7 +177,10 @@
             <input matInput formControlName="emailAddress" />
             <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error>
           </mat-form-field>
+        </div>
 
+        <!-- Client Type and Client Classification Row -->
+        <div class="responsive-row">
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
             <mat-select formControlName="clientTypeId">
@@ -185,7 +201,10 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
+        </div>
 
+        <!-- Submitted On and Activated On Row -->
+        <div class="responsive-row">
           <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
             <input
@@ -219,11 +238,18 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
-        <button type="button" mat-raised-button [routerLink]="['../general']">
+      <mat-card-actions class="button-container">
+        <button type="button" mat-raised-button [routerLink]="['../general']" class="custom-button">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
-        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">
+        <button
+          type="submit"
+          mat-raised-button
+          color="primary"
+          [disabled]="!editClientForm.valid"
+          (click)="submit()"
+          class="custom-button"
+        >
           {{ 'labels.buttons.Submit' | translate }}
         </button>
       </mat-card-actions>

src/app/clients/edit-client/edit-client.component.scss

@@ -1,3 +1,227 @@
 .margin-v {
   margin: 2em 0 0;
 }
+
+.flex-32 {
+  flex: 0 1 32%;
+  max-width: 32%;
+}
+
+.gap-2percent {
+  gap: 2%;
+}
+
+.align-center {
+  align-items: center;
+}
+
+// Enhanced layout styles with Material compatibility
+.container {
+  margin: 24px auto;
+  max-width: 1200px;
+  width: 100%;
+  padding: 0 24px;
+  box-sizing: border-box;
+}
+
+// More specific Material overrides
+:host ::ng-deep .mat-card {
+  padding: 32px;
+  margin: 16px 0;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+}
+
+:host ::ng-deep .mat-card-content {
+  padding: 0;
+}
+
+// Flex utilities with better responsive support
+.flex-24 {
+  flex: 0 1 calc(25% - 15px);
+  max-width: calc(25% - 15px);
+  margin-right: 0;
+}
+
+.flex-48 {
+  flex: 0 1 calc(50% - 10px);
+  max-width: calc(50% - 10px);
+  margin-right: 0;
+}
+
+.responsive-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.responsive-row:last-child {
+  margin-bottom: 0;
+}
+
+// Enhanced Material form field styling
+:host ::ng-deep .mat-form-field {
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+:host ::ng-deep .mat-form-field:last-child {
+  margin-right: 0;
+}
+
+// Ensure consistent form field appearance
+:host ::ng-deep .responsive-row .mat-form-field {
+  min-height: 56px;
+}
+
+:host ::ng-deep .responsive-row .mat-form-field .mat-form-field-wrapper {
+  padding-bottom: 1.3438em;
+}
+
+// Error state styling and form field appearance consistency
+:host ::ng-deep .mat-form-field-appearance-outline {
+  .mat-form-field-outline {
+    color: rgb(0 0 0 / 12%);
+  }
+
+  .mat-form-field-outline-thick {
+    color: #3f51b5;
+  }
+}
+
+:host ::ng-deep .mat-form-field.mat-form-field-invalid {
+  .mat-form-field-outline-thick {
+    color: #f44336;
+    opacity: 1;
+  }
+}
+
+:host ::ng-deep .mat-error {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.section-divider {
+  margin: 32px 0 24px;
+  border-color: rgb(0 0 0 / 12%);
+}
+
+:host ::ng-deep .mat-checkbox {
+  margin: 20px 0;
+}
+
+// Enhanced button styling with better Material integration
+:host ::ng-deep mat-card-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding: 24px 0;
+  margin-top: 32px;
+  border-top: 1px solid rgb(0 0 0 / 12%);
+  width: 100%;
+}
+
+:host ::ng-deep mat-card-actions button {
+  min-width: 100px;
+  height: 36px;
+  padding: 0 20px;
+  border-radius: 4px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  font-size: 13px;
+  margin: 0;
+}
+
+// Enhanced responsive breakpoints
+@media (width <= 1024px) {
+  .flex-24 {
+    flex: 0 1 calc(50% - 10px);
+    max-width: calc(50% - 10px);
+  }
+
+  .flex-48 {
+    flex: 0 1 100%;
+    max-width: 100%;
+  }
+}
+
+@media (width <= 768px) {
+  .flex-32,
+  .flex-24,
+  .flex-48 {
+    flex: 0 1 100%;
+    max-width: 100%;
+  }
+
+  .container {
+    margin: 16px;
+    padding: 0 16px;
+  }
+
+  :host ::ng-deep .mat-card {
+    padding: 20px;
+  }
+
+  .responsive-row {
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .responsive-row .mat-form-field {
+    flex: 1 1 100%;
+    max-width: 100%;
+    margin-right: 0;
+  }
+}
+
+@media (width <= 600px) {
+  :host ::ng-deep mat-card-actions {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  :host ::ng-deep mat-card-actions button {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+@media (width <= 480px) {
+  :host ::ng-deep .mat-card {
+    padding: 16px;
+    margin: 8px 0;
+  }
+
+  .responsive-row {
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .container {
+    padding: 0 12px;
+  }
+}
+
+// Fix for potential Material Design conflicts
+:host {
+  display: block;
+  width: 100%;
+}
+
+// Ensure proper form styling
+:host ::ng-deep form {
+  width: 100%;
+}
+
+// DatePicker specific styling
+:host ::ng-deep .mat-datepicker-toggle {
+  color: rgb(0 0 0 / 54%);
+}
+
+// Select dropdown styling
+:host ::ng-deep .mat-select-panel {
+  max-height: 256px;
+}