responsivity update

resources/js/components/Admin/WidgetTotals.vue

@@ -56,6 +56,15 @@
         }
     }
 
+    @media only screen and (max-width: 1190px) {
+        .widget-value {
+
+            span {
+                @include font-size(30);
+            }
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
         .widget-value {
 

resources/js/components/Admin/WidgetWrapper.vue

@@ -49,6 +49,15 @@
         }
     }
 
+    @media only screen and (max-width: 1190px) {
+        .headline {
+
+            .title {
+                @include font-size(14);
+            }
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
         .widget-content {
             background: $dark_mode_foreground;

resources/js/components/Index/Components/PricingTables.vue

@@ -70,6 +70,7 @@
         .plan-header {
 
             .icon {
+
                 path, line, polyline, rect, circle {
                     color: $theme;
                 }
@@ -122,7 +123,6 @@
     .plans-wrapper {
         display: flex;
         flex-wrap: wrap;
-        margin: 0 -25px;
         justify-content: center;
     }
 

resources/js/components/Index/IndexGetStarted.vue

@@ -316,6 +316,12 @@
         }
     }
 
+    @media only screen and (max-width: 1190px) {
+        .get-started-button {
+            margin-bottom: 280px;
+        }
+    }
+
     @media only screen and (max-width: 960px) {
         .page-title {
             padding-top: 20px;

resources/js/components/Index/IndexMainFeatures.vue

@@ -132,29 +132,30 @@
 
     @media only screen and (max-width: 1190px) {
 
-        .content {
-            display: block;
-        }
-
         .hero {
+            flex: 0 0 60%;
+
             img {
                 width: 100%;
             }
         }
 
         .features {
-            padding-left: 0;
-            margin-top: 50px;
+            padding-left: 25px;
+            margin-top: 0px;
         }
     }
 
     @media only screen and (max-width: 960px) {
 
         .content {
+            display: block;
             margin-top: 40px;
         }
 
         .features {
+            margin-top: 50px;
+
             .feature {
                 margin-bottom: 35px;
 

resources/js/components/Index/IndexPricingTables.vue

@@ -135,12 +135,20 @@
         display: block;
     }
 
-    @media only screen and (max-width: 960px) {
+    @media only screen and (max-width: 1190px) {
 
         .cloud-bg {
             display: none;
         }
 
+        .pricing {
+            padding-top: 150px;
+            padding-bottom: 60px;
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
         .page-title {
 
             .title {

resources/js/components/Others/PageHeader.vue

@@ -35,6 +35,7 @@
         width: 100%;
         position: sticky;
         top: 0;
+        padding-top: 20px;
         padding-bottom: 20px;
 
         .title {

resources/js/components/Others/Tables/DatatableWrapper.vue

@@ -174,7 +174,7 @@
     .table {
         width: 100%;
         border-collapse: collapse;
-        overflow-x: auto;
+        table-layout: fixed;
 
         tr {
             width: 100%;

resources/js/components/Sidebar/MenuBar.vue

@@ -126,7 +126,7 @@
         user-select: none;
         padding-top: 25px;
         display: grid;
-        width: 72px;
+        flex: 0 0 72px;
     }
 
     .icon-navigation {
@@ -225,8 +225,7 @@
 
     @media only screen and (max-width: 1024px) {
         .menu-bar {
-            min-width: 60px;
-            width: 60px;
+            flex: 0 0 60px;
         }
 
         .icon-navigation {