optimize layout

app/src/layouts/default.vue

@@ -9,7 +9,7 @@
       app
       :permanent="$vuetify.breakpoint.mdOnly"
       :temporary="$vuetify.breakpoint.smAndDown"
-      :clipped="clipped"
+      clipped
     >
       <template
         #prepend
@@ -92,8 +92,7 @@
       app
       color="orange darken-2"
       dark
-      flat_
+      clipped-left
-      :clipped-left="clipped"
     >
       <v-btn
         _class="hidden-xs-and-down"
@@ -145,10 +144,10 @@
       </template>
       <template v-else>
         <v-btn
-          to="/setup/wifi"
+          to="/wifi"
           icon
         >
-          <v-icon color="red">
+          <v-icon>
             $signalWifiOff
           </v-icon>
         </v-btn>
@@ -160,28 +159,26 @@
       />
     </v-app-bar>
 
-    <v-main class="grey lighten-3">
+    <v-main
-      <v-container>
+      :class="[{'grey lighten-3': !$vuetify.breakpoint.xsOnly}]"
-        <v-col
+    >
-          class="_md _offset-md"
+      <v-col
-          cols="12"
+        class="px-0"
-          sm="8"
+        cols="12"
-          offset-sm="2"
+        sm="8"
-          md="8"
+        offset-sm="2"
-          offset-md="2"
+        md="8"
-          lg="6"
+        offset-md="2"
-          offset-lg="3"
+        lg="6"
+        offset-lg="3"
+      >
+        <v-sheet
+          min-height="70vh"
+          rounded="lg"
         >
-          <v-sheet
+          <router-view class="pa-5" />
-            _min-width="1vh"
+        </v-sheet>
-            _max-width="50vh"
+      </v-col>
-            min-height="70vh"
-            rounded="lg"
-          >
-            <router-view />
-          </v-sheet>
-        </v-col>
-      </v-container>
     </v-main>
   </div>
 </template>
@@ -194,7 +191,6 @@
     components: { Notifications },
     data: () => ({
       drawer: true,
-      clipped: true,
       pages: [
         {
           label: 'Dashboard',