Fix flexbox view when there are three items

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -33,7 +33,7 @@
     import ServerBox from './ServerBox';
     import Navigation from '../core/Navigation';
     import isObject from 'lodash/isObject';
-    import {mapState} from 'vuex';
+    import { mapState } from 'vuex';
 
     export default {
         name: 'dashboard',
@@ -72,8 +72,8 @@
                 },
                 set: function (value) {
                     this.$store.dispatch('dashboard/setSearchTerm', value);
-                }
-            }
+                },
+            },
         },
 
         methods: {
@@ -112,6 +112,6 @@
             onChange: debounce(function () {
                 this.loadServers();
             }, 500),
-        }
+        },
     };
 </script>

resources/assets/scripts/components/dashboard/ServerBox.vue

@@ -1,4 +1,5 @@
 <template>
+    <div class="server-card-container">
         <div class="server-card animated-fade-in hover:shadow-md">
             <div class="content h-32 relative">
                 <router-link :to="link">
@@ -31,6 +32,7 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
@@ -122,7 +124,6 @@
                             throw new Error('Received an invalid response object back from status endpoint.');
                         }
 
-
                         this.resources = response.data.attributes;
                         this.status = this.getServerStatus();
 
@@ -189,6 +190,6 @@
                     this.backgroundedAt = new Date();
                 }
             },
-        }
+        },
     };
 </script>

resources/assets/styles/components/miscellaneous.css

@@ -52,20 +52,36 @@ code {
 /**
  * Flex boxes for server listing on user dashboard.
  */
-.server-card {
-    @apply .block .no-underline .shadow;
+.server-card-container {
+    @apply .mb-4;
 
     @screen smx {
         @apply .w-full;
     }
 
     @screen md {
-        @apply .w-1/3 .mr-4;
+        @apply .w-1/2 .pr-4;
+
+        &:nth-of-type(2n) {
+            @apply .pr-0;
+        }
+    }
+
+    @screen lg {
+        @apply .w-1/3 .pr-4;
+
+        &:nth-of-type(2n) {
+            @apply .pr-4;
+        }
 
         &:nth-of-type(3n) {
-            @apply .mr-0;
+            @apply .pr-0;
         }
     }
+}
+
+.server-card {
+    @apply .block .no-underline .shadow;
 
     & .identifier-icon {
         @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;

routes/server.php

@@ -13,3 +13,6 @@ Route::group(['prefix' => '/files'], function () {
         ->name('server.files')
         ->where('directory', '.*');
 });
+
+Route::get('/')->name('server.index');
+Route::get('/console')->name('server.console');