Fix: Overflow in Navbar by Making Table Scrollable (To avoid overflow)

Optimize the code by implementing the style globally

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>
 

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>
 

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;
   }
 }
+

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>
 

src/app/organization/payment-types/payment-types.component.scss

@@ -13,3 +13,4 @@ table {
 .text-center {
   text-align: center;
 }
+

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>