Cleanup layout of participationlist

aleksis/apps/alsijil/frontend/components/coursebook/absences/ParticipationList.vue

 <script setup>
-import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
-
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
-
-import updateParticipationMixin from "./updateParticipationMixin.js";
 </script>
 
 <template>
@@ -16,17 +12,31 @@ import updateParticipationMixin from "./updateParticipationMixin.js";
           :key="`documentation-${documentation.id}-participation-${participation.id}`"
           :value="participation.id"
           v-bind="$attrs"
+          two-line
         >
           <template #default="{ active }">
             <v-list-item-action>
               <v-checkbox :input-value="active" />
             </v-list-item-action>
-            <v-list-item-title>
-              {{ participation.person.fullName }}
-            </v-list-item-title>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ participation.person.fullName }}
+              </v-list-item-title>
+              <v-list-item-subtitle
+                v-if="participation.absenceReason && !compact"
+                class="full-width"
+              >
+                <absence-reason-group-select
+                  allow-empty
+                  empty-value="present"
+                  :loadSelectedChip="loading"
+                  :value="participation.absenceReason?.id || 'present'"
+                  @input="sendToServer([participation], 'absenceReason', $event)"
+                />
+              </v-list-item-subtitle>
+            </v-list-item-content>
             <v-list-item-action
-              v-if="participation.absenceReason"
-              class="full-width"
+              v-if="participation.absenceReason && compact"
             >
               <absence-reason-group-select
                 allow-empty
@@ -48,6 +58,8 @@ import updateParticipationMixin from "./updateParticipationMixin.js";
 </template>
 
 <script>
+import updateParticipationMixin from "./updateParticipationMixin";
+
 export default {
   name: "ParticipationList",
   mixins: [updateParticipationMixin],