From e5793fa59020ff41b839bc21c60df623d0d99fbb Mon Sep 17 00:00:00 2001
From: Shubham Kumar <shubham.24bcs10320@sst.scaler.com>
Date: Mon, 23 Feb 2026 06:33:01 +0530
Subject: [PATCH] WEB-778 fix(clients): align activate client form layout with
 standard pattern (#3211)

---
 .../activate-client.component.html            | 40 ++++++++++---------
 .../activate-client.component.scss            |  2 +-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
index 572767197..67133eaf7 100644
--- a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
+++ b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
@@ -10,25 +10,27 @@
   <mat-card>
     <form [formGroup]="activateClientForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field class="flex-fill" (click)="activationDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="activationDatePicker"
-            required
-            formControlName="activationDate"
-          />
-          <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #activationDatePicker></mat-datepicker>
-          @if (activateClientForm.controls.activationDate.hasError('required')) {
-            <mat-error>
-              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          }
-        </mat-form-field>
+        <div class="layout-column">
+          <mat-form-field (click)="activationDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="activationDatePicker"
+              required
+              formControlName="activationDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #activationDatePicker></mat-datepicker>
+            @if (activateClientForm.controls.activationDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+          </mat-form-field>
+        </div>
       </mat-card-content>
 
       <mat-card-actions class="layout-row align-center gap-5px responsive-column">
diff --git a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.scss b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.scss
index 7c3f1555b..ea8dfbfca 100644
--- a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.scss
+++ b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.scss
@@ -7,5 +7,5 @@
  */
 
 .container {
-  max-width: 37rem;
+  max-width: 30rem;
 }