Enhance the dashboard to make it responsive and corrected the logo at sidenav

Further fix the responsive design

src/app/core/shell/sidenav/sidenav.component.scss

@@ -13,6 +13,7 @@
 
   .app-brand {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.scss

@@ -1,5 +1,5 @@
 .card {
-  width: 27.5rem;
+  min-width: 18.5rem;
   padding: 0;
   .header {
     #office{

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.scss

@@ -1,5 +1,5 @@
 .card {
-  width: 27.5rem;
+  min-width: 18.5rem;
   padding: 0;
   .header {
     #office{

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html

@@ -20,7 +20,7 @@
   <mat-card-content>
     <!-- Structural directives like *ngIf break the canvas -->
     <div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
-      <canvas id="client-trends-bar" width="800" height="465"></canvas>
+      <canvas id="client-trends-bar" width="800" height="465" class="fallback"></canvas>
     </div>
     <mat-button-toggle-group [formControl]="timescale" id='timescale' appearance="legacy">
       <mat-button-toggle value="Day">{{"labels.buttons.Day" | translate}}</mat-button-toggle>

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss

@@ -1,5 +1,5 @@
 .card {
-  width: 41.25rem;
+  min-width: 18.5rem;
   padding: 0;
   .header {
     #office{
@@ -9,4 +9,9 @@
   #timescale {
     margin: 2% 35%;
   }
+  .fallback {
+    overflow-x: auto;
+    max-width: 100%;
+    min-height: 16.5rem;
+  }
 }

src/app/home/dashboard/dashboard.component.html

@@ -2,7 +2,7 @@
 
   <mat-card class="card" fxLayout="column" fxLayoutGap="40px">
 
-    <div fxLayout="row" fxLayoutGap="40px">
+    <div fxLayout="row" class="top-card">
 
       <mat-card class="recent-activities">
 
@@ -35,16 +35,22 @@
 
       </mat-card>
 
-      <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
+      <div class="amount-disbursed">
+        <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
+      </div>
 
     </div>
 
-    <div fxLayout="row" fxLayoutGap="40px">
+    <div fxLayout="row" class="bottom-card">
 
-      <mifosx-client-trends-bar></mifosx-client-trends-bar>
-
-      <mifosx-amount-collected-pie></mifosx-amount-collected-pie>
+      <div class="trends-bar">
+        <mifosx-client-trends-bar></mifosx-client-trends-bar>
+      </div>
 
+      <div class="amount-collected">
+        <mifosx-amount-collected-pie></mifosx-amount-collected-pie>
+      </div>
+      
     </div>
 
   </mat-card>

src/app/home/dashboard/dashboard.component.scss

@@ -1,10 +1,56 @@
 .card {
+  box-sizing: border-box;
   padding: 2%;
-  .recent-activities, .frequent-activities {
-    width: 20rem;
-    padding: 0;
-    .list {
-      padding-top: 0px;
+  display: flex;
+  flex-direction: column;
+
+  .top-card {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 2px;
+
+    .recent-activities,
+    .frequent-activities{
+      min-width: 18.5rem;
+    }
+    .recent-activities,
+    .frequent-activities,
+    .amount-disbursed {
+      flex: 1 0 calc(26.33% - 10px);
+      padding: 0;
+      margin: 10px;
+
+      .list {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .bottom-card{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 2px;
+
+    .trends-bar,
+    .amount-collected {
+      flex: 1 0 calc(40% - 10px);
+      padding: 0;
+      margin: 10px;
+    }
+  }
+ 
+  @media screen and (max-width: 768px) {
+    .recent-activities,
+    .frequent-activities,
+    .amount-disbursed,
+    .trends-bar,
+    .amount-collected {
+      box-sizing: border-box;
+      width: 100%;
+      flex: 1 0 calc(80% - 10px);
+      margin-bottom: 20px;
     }
   }
 }