handle different screen sizes

app/src/views/Setup/Appearance.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
           <v-card-title class="display-2 mb-12 justify-center text-center">Appearance</v-card-title>
 
           <v-radio-group v-model="settings.device.theme" row>
@@ -12,13 +14,14 @@
             <v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
           </v-card-actions>
         </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
 import apiDevice from "@/api/device";
 
-
 export default {
   data: () => ({
     isLoading: true,
@@ -46,5 +49,5 @@ export default {
       this.$router.push("/setup/done");
     }
   }
-}
+};
 </script>

app/src/views/Setup/Country.vue

@@ -1,8 +1,10 @@
 <template>
   <v-container fluid _fill-height>
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
         <template v-if="currentStep === 0">
           <!-- country -->
-      <v-card flat class="mx-auto" width="520">
+          <v-card flat>
             <v-card-title
               class="display-2 mb-12 justify-center text-center"
             >Select Your Country or Region</v-card-title>
@@ -28,7 +30,7 @@
 
         <template v-else-if="currentStep === 1">
           <!-- timezone if needed -->
-      <v-card flat class="mx-auto" width="520">
+          <v-card flat>
             <v-card-title class="display-2 mb-12 justify-center text-center">Select Your Timezone</v-card-title>
 
             <v-list class="ml-5 pa-0">
@@ -49,6 +51,8 @@
             </v-list>
           </v-card>
         </template>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -112,3 +116,11 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+/* issue https://github.com/vuetifyjs/vuetify/issues/9130 */
+>>> .v-card__text,
+.v-card__title {
+  word-break: normal;
+}
+</style>

app/src/views/Setup/Name.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
           <div class="justify-center text-center">
             <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$face</v-icon>
           </div>
@@ -37,6 +39,8 @@
             </v-card-actions>
           </template>
         </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 

app/src/views/Setup/Start.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
+		<v-row no-gutters justify="center">
+			<v-col lg="5" md="6" sm="8">
+				<v-card flat>
 					<v-card-title class="display-2 mt-12 justify-center text-center">Hello paperdash</v-card-title>
 
 					<Case
@@ -56,6 +58,8 @@
 						<v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
 					</v-card-actions>
 				</v-card>
+			</v-col>
+		</v-row>
   </v-container>
 </template>
 

app/src/views/Setup/Weather.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
           <div class="justify-center text-center">
             <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$wb_sunny</v-icon>
           </div>
@@ -29,7 +31,13 @@
             </v-card-text>
 
             <v-card-actions class="flex-column">
-          <v-btn :disabled="!isLocationValid" depressed block color="primary" @click="commitStep()">Continue</v-btn>
+              <v-btn
+                :disabled="!isLocationValid"
+                depressed
+                block
+                color="primary"
+                @click="commitStep()"
+              >Continue</v-btn>
               <v-btn
                 class="ma-0 mt-3"
                 text
@@ -40,6 +48,8 @@
             </v-card-actions>
           </template>
         </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 

app/src/views/Setup/Wifi.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
           <v-card-title class="display-2 mb-12 justify-center text-center">
             Choose a
             <br />Wi-Fi Network
@@ -57,6 +59,8 @@
             ></setup-wifi-connect>
           </v-dialog>
         </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>