From 40a16c8c1865b0dfab60ac75e36fa0d1a22bc48c Mon Sep 17 00:00:00 2001
From: Anvay <anvaykharb007@gmail.com>
Date: Thu, 15 Jan 2026 22:52:45 +0530
Subject: [PATCH] Improve filter section alignment and spacing on Investors
 page

- Restructured filter layout into organized rows for better visual hierarchy
- Applied consistent spacing (16px gaps) and equal field widths
- Aligned search button with filter inputs for cohesive appearance
- Ensured uniform input field heights (56px) across all filters
- Added responsive design: 3-column (desktop), 2-column (tablet), stacked (mobile)
- Enhanced button styling with proper sizing and alignment
- Maintained enterprise-grade professional UI aesthetic
---
 .../investors/investors.component.html        | 118 +++++++++---------
 .../investors/investors.component.scss        |  84 +++++++++++++
 2 files changed, 145 insertions(+), 57 deletions(-)

diff --git a/src/app/organization/investors/investors.component.html b/src/app/organization/investors/investors.component.html
index cc105b013..8ba5770dc 100644
--- a/src/app/organization/investors/investors.component.html
+++ b/src/app/organization/investors/investors.component.html
@@ -8,68 +8,72 @@
 
 <mat-card class="container">
   <mat-card-content>
-    <div class="layout-row-wrap gap-2px responsive-column">
-      <mat-form-field class="flex-18">
-        <mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
-        <input matInput [formControl]="searchText" />
-      </mat-form-field>
+    <div class="investor-filter-section">
+      <div class="filter-row">
+        <mat-form-field class="filter-field">
+          <mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
+          <input matInput [formControl]="searchText" />
+        </mat-form-field>
 
-      <mat-form-field class="flex-18" (click)="effectiveFromDatePicker.open()">
-        <mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="effectiveFromDatePicker"
-          [formControl]="effectiveFromDate"
-        />
-        <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
-      </mat-form-field>
+        <mat-form-field class="filter-field" (click)="effectiveFromDatePicker.open()">
+          <mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="effectiveFromDatePicker"
+            [formControl]="effectiveFromDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
+        </mat-form-field>
 
-      <mat-form-field class="flex-18" (click)="effectiveToDatePicker.open()">
-        <mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="effectiveToDatePicker"
-          [formControl]="effectiveToDate"
-        />
-        <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #effectiveToDatePicker></mat-datepicker>
-      </mat-form-field>
+        <mat-form-field class="filter-field" (click)="effectiveToDatePicker.open()">
+          <mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="effectiveToDatePicker"
+            [formControl]="effectiveToDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #effectiveToDatePicker></mat-datepicker>
+        </mat-form-field>
+      </div>
 
-      <mat-form-field class="flex-18" (click)="settlementFromDatePicker.open()">
-        <mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="settlementFromDatePicker"
-          [formControl]="settlementFromDate"
-        />
-        <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #settlementFromDatePicker></mat-datepicker>
-      </mat-form-field>
+      <div class="filter-row">
+        <mat-form-field class="filter-field" (click)="settlementFromDatePicker.open()">
+          <mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="settlementFromDatePicker"
+            [formControl]="settlementFromDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #settlementFromDatePicker></mat-datepicker>
+        </mat-form-field>
 
-      <mat-form-field class="flex-18" (click)="settlementToDatePicker.open()">
-        <mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="settlementToDatePicker"
-          [formControl]="settlementToDate"
-        />
-        <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #settlementToDatePicker></mat-datepicker>
-      </mat-form-field>
+        <mat-form-field class="filter-field" (click)="settlementToDatePicker.open()">
+          <mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="settlementToDatePicker"
+            [formControl]="settlementToDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #settlementToDatePicker></mat-datepicker>
+        </mat-form-field>
 
-      <div class="center m-t-15 flex-98">
-        <button mat-raised-button color="primary" (click)="searchEAO()">
-          <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
-        </button>
+        <div class="filter-button-container">
+          <button mat-raised-button color="primary" (click)="searchEAO()" class="search-button">
+            <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
+          </button>
+        </div>
       </div>
     </div>
 
diff --git a/src/app/organization/investors/investors.component.scss b/src/app/organization/investors/investors.component.scss
index c2672a318..6cbcb4ebd 100644
--- a/src/app/organization/investors/investors.component.scss
+++ b/src/app/organization/investors/investors.component.scss
@@ -6,6 +6,90 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+// Filter Section Styling
+.investor-filter-section {
+  margin-bottom: 24px;
+
+  .filter-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .filter-field {
+    flex: 1 1 calc(33.333% - 11px);
+    min-width: 200px;
+    max-width: 100%;
+
+    // Ensure consistent height across all fields
+    ::ng-deep .mat-mdc-form-field-infix {
+      min-height: 56px;
+    }
+
+    // Align datepicker icons consistently
+    ::ng-deep .mat-datepicker-toggle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .filter-button-container {
+    flex: 1 1 calc(33.333% - 11px);
+    min-width: 200px;
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 4px;
+
+    .search-button {
+      width: 100%;
+      height: 48px;
+      font-size: 15px;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+
+      fa-icon {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  // Responsive adjustments for tablets
+  @media screen and (width <= 1024px) {
+    .filter-field,
+    .filter-button-container {
+      flex: 1 1 calc(50% - 8px);
+      min-width: 180px;
+    }
+  }
+
+  // Responsive adjustments for mobile
+  @media screen and (width <= 768px) {
+    .filter-row {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .filter-field,
+    .filter-button-container {
+      flex: 1 1 100%;
+      width: 100%;
+      max-width: 100%;
+      min-width: 100%;
+    }
+
+    .filter-button-container {
+      padding-bottom: 0;
+      margin-top: 8px;
+    }
+  }
+}
+
 .status {
   color: black;
 }