responsivity update

resources/js/views/Admin/Dashboard.vue

@@ -148,6 +148,7 @@
     .dashboard-headline {
         display: flex;
         justify-content: space-between;
+        margin-top: 20px;
         margin-bottom: 20px;
     }
 
@@ -199,8 +200,25 @@
         }
     }
 
-    @media only screen and (max-width: 690px) {
+    @media only screen and (max-width: 1190px) {
+        .widgets-total {
+            margin: 0 -10px 10px;
 
+            .widget {
+                padding: 10px;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        .widgets-total {
+            display: block;
+        }
+
+        .became-backer {
+            display: none;
+        }
     }
 
     @media (prefers-color-scheme: dark) {

resources/js/views/Admin/Plans.vue

@@ -20,16 +20,17 @@
                 <DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
                     <template scope="{ row }">
                         <tr>
-                            <td class="name" style="min-width: 200px">
-                                <router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}" class="cell-item" tag="div">
-                                    <span>{{ row.data.attributes.name }}</span>
-                                </router-link>
-                            </td>
-                            <td>
+                            <td style="max-width: 80px">
                                 <span class="cell-item">
                                     <SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.status"/>
                                 </span>
                             </td>
+                            <td class="name" style="min-width: 120px">
+                                <router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}" class="cell-item" tag="div">
+                                    <span>{{ row.data.attributes.name }}</span>
+                                </router-link>
+                            </td>
+
                             <td>
                                 <span class="cell-item">
                                     {{ row.data.attributes.subscribers }}
@@ -114,13 +115,13 @@
                 plans: undefined,
                 columns: [
                     {
-                        label: 'Plan',
-                        field: 'data.attributes.name',
+                        label: 'Status',
+                        field: 'data.attributes.status',
                         sortable: true
                     },
                     {
-                        label: 'Status',
-                        field: 'data.attributes.status',
+                        label: 'Plan Name',
+                        field: 'data.attributes.name',
                         sortable: true
                     },
                     {

resources/js/views/Admin/Plans/PlanCreate.vue

@@ -2,7 +2,7 @@
     <div id="single-page">
         <div id="page-content" class="small-width">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <!--<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>-->
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
 
             <div class="content-page">
                 <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">