From 4c10815b30d5e3b37b60c2e817edc7ee812a9bee Mon Sep 17 00:00:00 2001
From: Vikash Prem Sharma <vikashkumarukg977@gmail.com>
Date: Sat, 2 Mar 2024 07:53:27 +0530
Subject: [PATCH] Fix: Overflow in Navbar by Making Table Scrollable (To avoid
 overflow)

Optimize the code by implementing the style globally
---
 .../adhoc-query/adhoc-query.component.html    |  2 +-
 .../manage-funds/manage-funds.component.html  |  2 +-
 .../manage-funds/manage-funds.component.scss  |  5 +--
 .../payment-types.component.html              |  2 +-
 .../payment-types.component.scss              |  1 +
 .../sms-campaigns.component.html              |  2 +-
 src/app/reports/xbrl/xbrl.component.html      | 36 ++++++++++---------
 .../audit-trails/audit-trails.component.html  |  2 +-
 .../manage-external-events.component.html     |  2 +-
 .../manage-reports.component.html             |  2 +-
 src/assets/styles/_overflow.scss              |  6 ++++
 11 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/app/organization/adhoc-query/adhoc-query.component.html b/src/app/organization/adhoc-query/adhoc-query.component.html
index 02f089424..680932c91 100644
--- a/src/app/organization/adhoc-query/adhoc-query.component.html
+++ b/src/app/organization/adhoc-query/adhoc-query.component.html
@@ -14,7 +14,7 @@
     </mat-form-field>
   </div>
 
-  <div class="mat-elevation-z8">
+  <div class="mat-elevation-z8 table-container">
 
     <table mat-table [dataSource]="dataSource" matSort>
 
diff --git a/src/app/organization/manage-funds/manage-funds.component.html b/src/app/organization/manage-funds/manage-funds.component.html
index 65c94345b..9c7ca9f65 100644
--- a/src/app/organization/manage-funds/manage-funds.component.html
+++ b/src/app/organization/manage-funds/manage-funds.component.html
@@ -16,7 +16,7 @@
     </mat-form-field>
   </div>
 
-  <div #chargesTable class="mat-elevation-z8">
+  <div #chargesTable class="mat-elevation-z8 table-container">
 
     <table mat-table [dataSource]="dataSource" matSort>
 
diff --git a/src/app/organization/manage-funds/manage-funds.component.scss b/src/app/organization/manage-funds/manage-funds.component.scss
index 9cb2c854a..77ebdea8f 100644
--- a/src/app/organization/manage-funds/manage-funds.component.scss
+++ b/src/app/organization/manage-funds/manage-funds.component.scss
@@ -1,7 +1,3 @@
-.container{
-  width: 74rem;
-}
-
 table {
   width: 100%;
 
@@ -9,3 +5,4 @@ table {
     cursor: pointer;
   }
 }
+
diff --git a/src/app/organization/payment-types/payment-types.component.html b/src/app/organization/payment-types/payment-types.component.html
index 893b80568..f1a8d2d9e 100644
--- a/src/app/organization/payment-types/payment-types.component.html
+++ b/src/app/organization/payment-types/payment-types.component.html
@@ -16,7 +16,7 @@
     </mat-form-field>
   </div>
 
-  <div class="mat-elevation-z8">
+  <div class="mat-elevation-z8 table-container">
 
     <table mat-table [dataSource]="dataSource" matSort>
 
diff --git a/src/app/organization/payment-types/payment-types.component.scss b/src/app/organization/payment-types/payment-types.component.scss
index 1748276d8..ff35a6aaa 100644
--- a/src/app/organization/payment-types/payment-types.component.scss
+++ b/src/app/organization/payment-types/payment-types.component.scss
@@ -13,3 +13,4 @@ table {
 .text-center {
   text-align: center;
 }
+
diff --git a/src/app/organization/sms-campaigns/sms-campaigns.component.html b/src/app/organization/sms-campaigns/sms-campaigns.component.html
index 4c0a88e6f..abc38a6f4 100644
--- a/src/app/organization/sms-campaigns/sms-campaigns.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaigns.component.html
@@ -16,7 +16,7 @@
     </mat-form-field>
   </div>
 
-  <div class="mat-elevation-z8">
+  <div class="mat-elevation-z8 table-container">
 
     <table mat-table [dataSource]="dataSource" matSort>
 
diff --git a/src/app/reports/xbrl/xbrl.component.html b/src/app/reports/xbrl/xbrl.component.html
index 47c582a68..0fbbd0aed 100644
--- a/src/app/reports/xbrl/xbrl.component.html
+++ b/src/app/reports/xbrl/xbrl.component.html
@@ -13,29 +13,31 @@
          <mat-tab label="Expenses"></mat-tab>
       </mat-tab-group>
 
-      <table mat-table [dataSource]="dataSource">
+      <div class="table-container">
+         <table mat-table [dataSource]="dataSource">
 
-         <ng-container matColumnDef="info">
-            <td mat-cell *matCellDef="let mixtaxonomy">
-               <fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
-            </td>
-         </ng-container>
+            <ng-container matColumnDef="info">
+               <td mat-cell *matCellDef="let mixtaxonomy">
+                  <fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
+               </td>
+            </ng-container>
 
-         <ng-container matColumnDef="name">
-            <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td>
-         </ng-container>
+            <ng-container matColumnDef="name">
+               <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td>
+            </ng-container>
 
-         <ng-container matColumnDef="dimension">
-            <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td>
-         </ng-container>
+            <ng-container matColumnDef="dimension">
+               <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td>
+            </ng-container>
 
-         <ng-container matColumnDef="mapping">
-            <td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td>
-         </ng-container>
+            <ng-container matColumnDef="mapping">
+               <td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td>
+            </ng-container>
 
-         <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
 
-      </table>
+         </table>
+      </div>
 
       <div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
          <button mat-raised-button color="primary" [routerLink]="['./report']">
diff --git a/src/app/system/audit-trails/audit-trails.component.html b/src/app/system/audit-trails/audit-trails.component.html
index 8bbefef7d..28e464a13 100644
--- a/src/app/system/audit-trails/audit-trails.component.html
+++ b/src/app/system/audit-trails/audit-trails.component.html
@@ -97,7 +97,7 @@
   </mat-option>
 </mat-autocomplete>
 
-<div class="container mat-elevation-z8">
+<div class="container mat-elevation-z8 table-container">
 
   <table mat-table [dataSource]="dataSource" matSort>
 
diff --git a/src/app/system/manage-external-events/manage-external-events.component.html b/src/app/system/manage-external-events/manage-external-events.component.html
index 0afde806a..7ea06ed35 100644
--- a/src/app/system/manage-external-events/manage-external-events.component.html
+++ b/src/app/system/manage-external-events/manage-external-events.component.html
@@ -14,7 +14,7 @@
     </div>
   </div>
 
-  <div #eventsTable class="mat-elevation-z8">
+  <div #eventsTable class="mat-elevation-z8 table-container">
 
     <table mat-table [dataSource]="dataSource" matSort>
 
diff --git a/src/app/system/manage-reports/manage-reports.component.html b/src/app/system/manage-reports/manage-reports.component.html
index 1989fae35..6d3bc38a8 100644
--- a/src/app/system/manage-reports/manage-reports.component.html
+++ b/src/app/system/manage-reports/manage-reports.component.html
@@ -16,7 +16,7 @@
         </mat-form-field>
     </div>
 
-    <div #reportsTable class="mat-elevation-z8">
+    <div #reportsTable class="mat-elevation-z8 table-container">
 
         <table mat-table [dataSource]="dataSource" matSort>
 
diff --git a/src/assets/styles/_overflow.scss b/src/assets/styles/_overflow.scss
index f62f77810..1bff4bd3b 100644
--- a/src/assets/styles/_overflow.scss
+++ b/src/assets/styles/_overflow.scss
@@ -19,3 +19,9 @@ body {
 .overflow-scroll {
   overflow: scroll;
 }
+
+.table-container {
+  overflow-x: auto;
+  max-width: 100%;
+}
+