diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
index c081a4b1d885a37bc450d5663b7e56357de9bdd7..751e6b90d15599ac113544b3698a30ac736e80ce 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
@@ -109,6 +109,17 @@ export default {
       });
     },
   },
+  computed: {
+    gridTemplateAreas() {
+      return this.compact
+        ? `"absences tardinesses extra_marks"
+  "personal_notes personal_notes personal_notes"`
+        : `"absences" "tardinesses" "extra_marks"`;
+    },
+    gridTemplateColumnsNum() {
+      return this.compact ? 3 : 1;
+    },
+  },
 };
 </script>
 
@@ -116,9 +127,8 @@ export default {
 .grid {
   display: grid;
   max-width: 100%;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-template-areas: "absences  tardinesses  extra_marks"
-  "personal_notes  personal_notes  personal_notes";
+  grid-template-columns: repeat(v-bind(gridTemplateColumnsNum), minmax(0, 1fr));
+  grid-template-areas: v-bind(gridTemplateAreas);
   gap: 0.5em;
 }
 </style>