cash flow responsive control for dashboard

public/css/app.css

@@ -3092,10 +3092,6 @@ button, input, optgroup, select, textarea{
   top: -100%;
   bottom: -100%;
 }
-.inset-y-1\/2{
-  top: 50%;
-  bottom: 50%;
-}
 .top-0{
   top: 0px;
 }
@@ -48223,10 +48219,18 @@ html[dir='rtl'] .el-scrollbar__wrap {
     }
     /* apex-chart cash-flow */
     .apex-chart-cash-flow .apexcharts-legend {
-        width: 24rem !important;
+        width: 100% !important;
         -ms-flex-pack: distribute !important;
             justify-content: space-around !important;
         padding: 0;
+        -ms-flex-wrap: nowrap !important;
+            flex-wrap: nowrap !important;
+    }
+
+    .apex-chart-cash-flow .apexcharts-legend-series {
+        width: 8rem;
+        text-align: center;
+        margin: 0 !important;
     }
 
     .apex-chart-cash-flow  .apexcharts-toolbar {
@@ -48343,6 +48347,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     }
 }
 
+@media only screen and (max-width: 480px) {
+    .dashboard-picker .el-picker-panel__body {
+        width: 100% !important;
+        margin-left: unset !important;
+    }
+
+    .dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
+        width: 100% !important;
+    }
+}
+
 #nprogress .bar {
     background: #A6A8C9 !important;
     height: 5px !important;
@@ -50958,6 +50973,10 @@ body{
     width: 33.333333%;
   }
 
+  .sm\:w-96{
+    width: 24rem;
+  }
+
   .sm\:w-60{
     width: 15rem;
   }
@@ -50966,10 +50985,6 @@ body{
     width: auto;
   }
 
-  .sm\:w-96{
-    width: 24rem;
-  }
-
   .sm\:flex-1{
     -webkit-box-flex: 1;
         -ms-flex: 1 1 0%;
@@ -51049,12 +51064,6 @@ body{
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]){
-    --tw-space-y-reverse: 0;
-    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-  }
-
   .sm\:divide-x-2 > :not([hidden]) ~ :not([hidden]){
     --tw-divide-x-reverse: 0;
     border-right-width: calc(2px * var(--tw-divide-x-reverse));
@@ -51468,16 +51477,16 @@ body{
     padding-right: 6rem;
   }
 
-    .lg\:py-0{
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
     .lg\:px-0{
     padding-left: 0px;
     padding-right: 0px;
   }
 
+    .lg\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
     .lg\:pl-24{
     padding-left: 6rem;
   }

resources/assets/sass/app.css

@@ -454,9 +454,16 @@ html[dir='rtl'] .el-scrollbar__wrap {
     }
     /* apex-chart cash-flow */
     .apex-chart-cash-flow .apexcharts-legend {
-        width: 24rem !important;
+        width: 100% !important;
         justify-content: space-around !important;
         padding: 0;
+        flex-wrap: nowrap !important;
+    }
+
+    .apex-chart-cash-flow .apexcharts-legend-series {
+        width: 8rem;
+        text-align: center;
+        margin: 0 !important;
     }
 
     .apex-chart-cash-flow  .apexcharts-toolbar {
@@ -564,6 +571,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     }
 }
 
+@media only screen and (max-width: 480px) {
+    .dashboard-picker .el-picker-panel__body {
+        width: 100% !important;
+        margin-left: unset !important;
+    }
+
+    .dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
+        width: 100% !important;
+    }
+}
+
 #nprogress .bar {
     background: #A6A8C9 !important;
     height: 5px !important;

resources/views/portal/invoices/signed.blade.php

@@ -1,4 +1,4 @@
-<div class="w-full lg:max-w-6xl m-auto">
+<div class="w-full lg:max-w-6xl px-4 lg:px-0  m-auto">
     <x-layouts.signed>
         <x-slot name="title">
             {{ setting('invoice.title', trans_choice('general.invoices', 1)) . ': ' . $invoice->document_number }}