frontend: vehiclesetup: Fix general style

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

Author: patrickelectric

core/frontend/src/components/vehiclesetup/SetupOverview.vue

@@ -1,17 +1,19 @@
 <template>
-  <div>
+  <div class="mx-2">
     <v-row class="mt-5">
       <v-col
         cols="12"
         sm="7"
+        class="d-flex"
       >
-        <v-card class="pa-5 ma-2">
+        <v-card class="pa-5 flex-grow-1 d-flex flex-column">
           <vehicle-viewer
             :highlight="highlight"
             noannotations
             :autorotate="true"
+            class="flex-grow-1"
             :style="{
-              height: '500px',
+              'min-height': '400px',
               width: '100%',
             }"
           />
@@ -25,14 +27,20 @@
         <onboard-sensors />
       </v-col>
     </v-row>
-    <v-sheet class="d-flex">
-      <ping-info />
-      <video-overview />
-      <lights-info />
-      <gripper-info />
-      <leak-info />
-      <power-info />
-    </v-sheet>
+    <v-row class="mt-5 mb-5">
+      <v-col
+        v-for="component in bottomComponents"
+        :key="component"
+        cols="12"
+        sm="6"
+        md="4"
+      >
+        <component
+          :is="component"
+          class="fill-height"
+        />
+      </v-col>
+    </v-row>
   </div>
 </template>
 
@@ -66,6 +74,14 @@ export default Vue.extend({
   data() {
     return {
       highlight: null as string | null,
+      bottomComponents: [
+        'ping-info',
+        'video-overview',
+        'lights-info',
+        'gripper-info',
+        'leak-info',
+        'power-info',
+      ],
     }
   },
 })

core/frontend/src/components/vehiclesetup/overview/LeakInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Leak
     </v-card-title>

core/frontend/src/components/vehiclesetup/overview/LightsInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Lights
     </v-card-title>

core/frontend/src/components/vehiclesetup/overview/OnboardSensors.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2">
+  <v-card class="mt-6">
     <v-card-title class="align-center">
       Autopilot Sensors
     </v-card-title>

core/frontend/src/components/vehiclesetup/overview/PingInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2 pinginfo">
+  <v-card class="pa-2">
     <v-card-title class="justify-center">
       Ping Sensors
     </v-card-title>
@@ -56,7 +56,4 @@ i.ping360 {
     transform: rotate(180deg);
     margin: 15px;
 }
-.pinginfo {
-  width: fit-content;
-}
 </style>

core/frontend/src/components/vehiclesetup/overview/PowerInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Battery Monitor
     </v-card-title>

core/frontend/src/components/vehiclesetup/overview/VehicleInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2">
+  <v-card>
     <v-card-title class="align-center">
       Vehicle
     </v-card-title>

core/frontend/src/components/vehiclesetup/overview/VideoOverview.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Video
     </v-card-title>

core/frontend/src/components/vehiclesetup/overview/gripper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="ma-2 pa-2">
+  <v-card class="pa-2">
     <v-card-title class="align-center">
       Gripper
     </v-card-title>