Update layout of tardiness card (horizontal stack)

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue

@@ -108,12 +108,11 @@ export default {
   computed: {
     gridTemplateAreas() {
       return this.compact
-        ? `"absences tardinesses extra_marks"
-  "personal_notes personal_notes personal_notes"`
+        ? `"absences extra_marks" "tardinesses tardinesses"`
         : `"absences" "tardinesses" "extra_marks"`;
     },
     gridTemplateColumnsNum() {
-      return this.compact ? 3 : 1;
+      return this.compact ? 2 : 1;
     },
   },
 };

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue

 <template>
   <v-skeleton-loader v-if="loading" type="card" />
-  <v-card v-else class="text-center">
-    <v-card-text
-      class="d-flex flex-column align-center justify-center fill-height"
-    >
-      <div class="text-h2">
-        {{ $n(tardinessCount) }}
-      </div>
-      <div class="text-subtitle-2">
-        {{ $tc("alsijil.personal_notes.tardiness_n", tardinessCount) }}
-      </div>
-      <div class="text-caption">
-        <!-- TODO: Show average tardiness instead of sum like mock-up? -->
-        <div>
-          <v-icon small>mdi-sigma</v-icon>
-          {{ $tc("time.minutes_n", tardinessSum, { n: $n(tardinessSum) }) }}
-        </div>
-        <div>
-          <v-icon small>mdi-diameter-variant</v-icon>
-          {{
-            $tc("time.minutes_n", tardinessSum / tardinessCount, {
-              n: $n(tardinessSum / tardinessCount),
-            })
-          }}
-        </div>
-      </div>
+  <v-card v-else>
+    <v-card-text>
+      <v-row>
+        <v-col class="text-center">
+          <div class="text-h2">
+            {{ $n(tardinessCount) }}
+          </div>
+          <div class="text-subtitle-2">
+            {{ $tc("alsijil.personal_notes.tardiness_n", tardinessCount) }}
+          </div>
+        </v-col>
+
+        <v-col
+          class="text-caption d-flex flex-column justify-center align-center"
+        >
+          <div>
+            <div>
+              <v-icon small>mdi-sigma</v-icon>
+              {{ $tc("time.minutes_n", tardinessSum, { n: $n(tardinessSum) }) }}
+            </div>
+            <div>
+              <v-icon small>mdi-diameter-variant</v-icon>
+              {{
+                $tc("time.minutes_n", tardinessSum / tardinessCount, {
+                  n: $n(tardinessSum / tardinessCount),
+                })
+              }}
+            </div>
+          </div>
+        </v-col>
+      </v-row>
     </v-card-text>
   </v-card>
 </template>