Make chips dense and center aligned

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

@@ -16,11 +16,11 @@
     </template>
 
     <template v-for="(extraMark, index) in extraMarks" #[`extraMarks.${index}.count`]="{ item }">
-      <extra-mark-chip :extra-mark="extraMark" only-show-count :count="item.extraMarks.find(m => extraMark.id === m.extraMark.id).count" />
+      <extra-mark-chip :extra-mark="extraMark" only-show-count dense :count="item.extraMarks.find(m => extraMark.id === m.extraMark.id).count" />
     </template>
 
     <template v-for="(absenceReason, index) in absenceReasons" #[`absenceReasons.${index}.count`]="{ item }">
-      <absence-reason-chip :absence-reason="absenceReason" onlyShowCount :count="item.absenceReasons.find(m => absenceReason.id === m.absenceReason.id).count" />
+      <absence-reason-chip :absence-reason="absenceReason" onlyShowCount dense :count="item.absenceReasons.find(m => absenceReason.id === m.absenceReason.id).count" />
     </template>
 
     <template #person="{ item }">
@@ -31,11 +31,11 @@
     </template>
 
     <template #tardinessCount="{ item }">
-      <v-chip outlined class="me-2">
+      <v-chip dense outlined class="me-2">
         <v-icon left>mdi-chart-line-variant</v-icon>
         {{ item.tardinessCount }}×
       </v-chip>
-      <v-chip outlined>
+      <v-chip dense outlined>
         <v-icon left>mdi-sigma</v-icon>
         {{ $tc("time.minutes_n", item.tardinessSum) }}
       </v-chip>
@@ -90,17 +90,20 @@ export default {
           return {
             text: reason.name,
             value: `absenceReasons.${index}.count`,
+            align: "center",
           };
         }),
         ...this.extraMarks.map((mark, index) => {
           return {
             text: mark.name,
             value: `extraMarks.${index}.count`,
+            align: "center",
           };
         }),
         {
           text: this.$t("alsijil.personal_notes.tardiness_plural"),
           value: "tardinessCount",
+          align: "center",
         },
         {
           value: "actions",