Resolve "Follow-up from "Resolve "Add absence overview page"""

Closes #308

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -27,27 +27,30 @@
             "
           >
             <v-row class="mb-2" no-gutters>
-              <v-col>
-                <v-chip
+              <v-col 
+                v-for="(
+                  participationsByDocumentation, index
+                ) in selectedParticipationLists"
+                :key="index"
+              >
+                <v-card
                   outlined
                   class="mr-1"
-                  v-for="(
-                    participationsByDocumentation, index
-                  ) in selectedParticipationLists"
-                  :key="index"
                 >
-                  {{
-                    getDocumentationShortInformation(
-                      participationsByDocumentation[0].documentation,
-                    )
-                  }}:&nbsp;<strong>{{
-                    getParticipationsNameList(participationsByDocumentation)
-                  }}</strong>
-                </v-chip>
+                  <v-card-text class="pa-1">
+                    {{
+                      getDocumentationShortInformation(
+                        participationsByDocumentation[0].documentation,
+                      )
+                    }}:&nbsp;<strong>{{
+                      getParticipationsNameList(participationsByDocumentation)
+                    }}</strong>
+                  </v-card-text>
+                </v-card>
               </v-col>
             </v-row>
             <v-row class="my-0" align="center">
-              <v-col class="py-0">
+              <v-col cols="12" md="6" class="py-0">
                 <h4>{{ $t("alsijil.coursebook.participation_status") }}</h4>
                 <absence-reason-buttons
                   class="mb-1"
@@ -57,7 +60,7 @@
                   @input="handleMultipleAction('absenceReason', $event)"
                 />
               </v-col>
-              <v-col class="py-0">
+              <v-col cols="12" md="6" class="py-0">
                 <h4>{{ $t("alsijil.extra_marks.title_plural") }}</h4>
                 <extra-mark-buttons
                   @input="handleMultipleAction('extraMark', $event)"