From 094fd5f1e9723ddc8b730e3dffc21b6276092be4 Mon Sep 17 00:00:00 2001
From: Soni Jay <jaygsoni14@gmail.com>
Date: Fri, 16 Jan 2026 23:09:21 +0530
Subject: [PATCH] WEB-580 scroll bar (#3001)

---
 .../datatable-multi-row.component.html        | 54 ++++++++++---------
 .../datatable-multi-row.component.scss        |  5 ++
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
index a17d0e431..5f21a1bd9 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
@@ -42,33 +42,35 @@
 
   <mat-card class="data-table-card m-t-10">
     <mat-card-content>
-      <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z2 m-b-25">
-        @for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) {
-          <ng-container [matColumnDef]="datatableColumn">
-            @if (i === 0) {
-              <th mat-header-cell *matHeaderCellDef class="checkbox-column"></th>
-              <td mat-cell *matCellDef="let data">
-                <mat-checkbox
-                  class="center"
-                  (click)="$event.stopPropagation()"
-                  (change)="$event ? itemToggle(data) : null"
-                  [checked]="selection.isSelected(data)"
-                >
-                </mat-checkbox>
-              </td>
-            }
-            @if (i > 0) {
-              <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
-              <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
-                {{ formatValue(data, datatableColumn) }}
-              </td>
-            }
-          </ng-container>
-        }
+      <div class="table-scroll-wrapper">
+        <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z2 m-b-25">
+          @for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) {
+            <ng-container [matColumnDef]="datatableColumn">
+              @if (i === 0) {
+                <th mat-header-cell *matHeaderCellDef class="checkbox-column"></th>
+                <td mat-cell *matCellDef="let data">
+                  <mat-checkbox
+                    class="center"
+                    (click)="$event.stopPropagation()"
+                    (change)="$event ? itemToggle(data) : null"
+                    [checked]="selection.isSelected(data)"
+                  >
+                  </mat-checkbox>
+                </td>
+              }
+              @if (i > 0) {
+                <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
+                <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
+                  {{ formatValue(data, datatableColumn) }}
+                </td>
+              }
+            </ng-container>
+          }
 
-        <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: datatableColumns" class="data-row"></tr>
-      </table>
+          <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: datatableColumns" class="data-row"></tr>
+        </table>
+      </div>
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss
index 38ebe5f16..b50bfe48b 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss
@@ -23,6 +23,11 @@
 
     .mat-card-content {
       padding: 0;
+
+      .table-scroll-wrapper {
+        overflow-x: auto;
+        width: 100%;
+      }
     }
   }