From 838c9b39c01cc62ad19e1d33abc2f5ce8dd0953d Mon Sep 17 00:00:00 2001
From: SnehaRH <sneha@navadhiti.com>
Date: Thu, 5 Feb 2026 17:22:51 +0530
Subject: [PATCH] fix: amm-1971 overlapping icons

---
 .../inward-stock-report.component.css         |  19 +-
 .../inward-stock-report.component.html        | 174 ++++++++----------
 2 files changed, 97 insertions(+), 96 deletions(-)

diff --git a/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.css b/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.css
index bad2176..e536358 100644
--- a/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.css
+++ b/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.css
@@ -1,7 +1,20 @@
-/* CSS files should not be empty SonarQube Bug Fix */
+/* Fix for overlapping at different zoom levels */
+.mat_form_field_background_width {
+    width: 100% !important;
+}
 
+.input-full-width {
+    width: 100% !important;
+}
 
-.mat_form_field_background_width>>>.mat-mdc-text-field-wrapper {
-    width: 125% !important;
+/* Ensure Material form field doesn't overflow */
+::ng-deep .mat_form_field_background_width .mat-mdc-text-field-wrapper {
+    width: 100% !important;
+    max-width: 100% !important;
 }
 
+/* Add some spacing between columns to prevent overlap */
+.row > [class*='col-'] {
+    padding-left: 8px;
+    padding-right: 8px;
+}
\ No newline at end of file
diff --git a/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.html b/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.html
index 83c4eee..32187e6 100644
--- a/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.html
+++ b/src/app/app-modules/inventory/reports/inward-stock-report/inward-stock-report.component.html
@@ -1,96 +1,84 @@
-<div class="container-fluid">
-  <div class="row m-t-10">
-    <div class="col-xs-12 col-sm-6">
-      <h4>{{ currentLanguageSet?.inventory?.inwardStockReport }}</h4>
-    </div>
-  </div>
-
-  <div class="m-b-10">
-    <div class="col-12">
-      <form [formGroup]="inwardStockForm" class="row">
-        <div class="col-3">
-          <mat-form-field
-            class="input-full-width mat_form_field_background_width"
-          >
-            <mat-label>
-              {{ currentLanguageSet?.inventory?.startDate }}
-            </mat-label>
-            <input
-              matInput
-              [matDatepicker]="picker"
-              name="startDate"
-              id="startDate"
-              formControlName="startDate"
-              (change)="checkEndDate()"
-              [max]="maxEndDate"
-              [disabled]="true"
-              (focus)="trackFieldInteraction('Start Date')"
-            />
-            <mat-datepicker-toggle
-              matSuffix
-              [for]="picker"
-            ></mat-datepicker-toggle>
-            <mat-datepicker [style.width]="'100%'" #picker></mat-datepicker>
-          </mat-form-field>
-        </div>
-        <div class="col-3">
-          <mat-form-field
-            class="input-full-width mat_form_field_background_width"
-          >
-            <mat-label>
-              {{ currentLanguageSet?.inventory?.endDate }}
-            </mat-label>
-            <input
-              matInput
-              [matDatepicker]="pickerEnd"
-              name="endDate"
-              id="endDate"
-              formControlName="endDate"
-              [min]="minEndDate"
-              [max]="maxEndDate"
-              [disabled]="true"
-              (focus)="trackFieldInteraction('End Date')"
-            />
-            <mat-datepicker-toggle
-              matSuffix
-              [for]="pickerEnd"
-            ></mat-datepicker-toggle>
-            <mat-datepicker [style.width]="'100%'" #pickerEnd></mat-datepicker>
-          </mat-form-field>
-        </div>
-        <div class="col-3">
-          <mat-form-field
-            class="input-full-width mat_form_field_background_width"
-          >
-            <mat-label>
-              {{ currentLanguageSet?.inventory?.facility }}
-            </mat-label>
-            <mat-select
-              [style.width]="'100%'"
-              formControlName="facilityName"
-              (selectionChange)="trackFieldInteraction('Facility')"
-            >
-              <mat-option *ngFor="let item of facilities" [value]="item">{{
-                item
-              }}</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="col-3" style="text-align: start; margin-top: 20px">
-          <button
-            mat-raised-button
-            color="accent"
-            class="mat_green"
-            type="submit"
-            [disabled]="!inwardStockForm.valid"
-            (click)="
-              downloadReport(true); trackFieldInteraction('Download Button')
-            "
+<div class="m-b-10">
+  <div class="col-12">
+    <form [formGroup]="inwardStockForm" class="row g-2">
+      <div class="col-12 col-md-6 col-lg-3">
+        <mat-form-field class="w-75">
+          <mat-label>
+            {{ currentLanguageSet?.inventory?.startDate }}
+          </mat-label>
+          <input
+            matInput
+            [matDatepicker]="picker"
+            name="startDate"
+            id="startDate"
+            formControlName="startDate"
+            (change)="checkEndDate()"
+            [max]="maxEndDate"
+            [disabled]="true"
+            (focus)="trackFieldInteraction('Start Date')"
+          />
+          <mat-datepicker-toggle
+            matSuffix
+            [for]="picker"
+          ></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+      </div>
+      <div class="col-12 col-md-6 col-lg-3">
+        <mat-form-field class="w-75">
+          <mat-label>
+            {{ currentLanguageSet?.inventory?.endDate }}
+          </mat-label>
+          <input
+            matInput
+            [matDatepicker]="pickerEnd"
+            name="endDate"
+            id="endDate"
+            formControlName="endDate"
+            [min]="minEndDate"
+            [max]="maxEndDate"
+            [disabled]="true"
+            (focus)="trackFieldInteraction('End Date')"
+          />
+          <mat-datepicker-toggle
+            matSuffix
+            [for]="pickerEnd"
+          ></mat-datepicker-toggle>
+          <mat-datepicker #pickerEnd></mat-datepicker>
+        </mat-form-field>
+      </div>
+      <div class="col-12 col-md-6 col-lg-3">
+        <mat-form-field class="w-75">
+          <mat-label>
+            {{ currentLanguageSet?.inventory?.facility }}
+          </mat-label>
+          <mat-select
+            formControlName="facilityName"
+            (selectionChange)="trackFieldInteraction('Facility')"
           >
-            {{ currentLanguageSet?.inventory?.download }}
-          </button>
-        </div>
-      </form>
-    </div>
+            <mat-option *ngFor="let item of facilities" [value]="item">{{
+              item
+            }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div
+        class="col-3"
+        style="display: flex; align-items: flex-end; padding-bottom: 20px"
+      >
+        <button
+          mat-raised-button
+          color="accent"
+          class="mat_green w-50"
+          type="submit"
+          [disabled]="!inwardStockForm.valid"
+          (click)="
+            downloadReport(true); trackFieldInteraction('Download Button')
+          "
+        >
+          {{ currentLanguageSet?.inventory?.download }}
+        </button>
+      </div>
+    </form>
   </div>
 </div>