Improve mobile design

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

@@ -21,32 +21,26 @@ import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReas
             <v-list-item-action class="my-0">
               <v-checkbox class="ma-0" :input-value="active" />
             </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ participation.person.fullName }}
-              </v-list-item-title>
-              <absence-reason-group-select
-                v-if="participation.absenceReason && !compact"
-                class="full-width"
-                allow-empty
-                :load-selected-chip="loading"
-                :custom-absence-reasons="absenceReasons"
-                :value="participation.absenceReason?.id || 'present'"
-                @input="sendToServer([participation], 'absenceReason', $event)"
-              />
+            <v-list-item-content class="pa-0">
+              <v-row align="center" justify="space-between" no-gutters>
+                <v-col>
+                  <v-list-item-title :class="{ 'mt-2': $vuetify.breakpoint.mobile }">
+                    {{ participation.person.fullName }}
+                  </v-list-item-title>
+                </v-col>
+                <v-col cols="12" md="auto">
+                  <absence-reason-group-select
+                    v-if="participation.absenceReason"
+                    class="flex-grow-1 ml-auto"
+                    allow-empty
+                    :load-selected-chip="loading"
+                    :custom-absence-reasons="absenceReasons"
+                    :value="participation.absenceReason?.id || 'present'"
+                    @input="sendToServer([participation], 'absenceReason', $event)"
+                  />
+                </v-col>
+              </v-row>
             </v-list-item-content>
-            <v-list-item-action
-              v-if="participation.absenceReason && compact"
-              class="ma-0"
-            >
-              <absence-reason-group-select
-                allow-empty
-                :load-selected-chip="loading"
-                :custom-absence-reasons="absenceReasons"
-                :value="participation.absenceReason?.id || 'present'"
-                @input="sendToServer([participation], 'absenceReason', $event)"
-              />
-            </v-list-item-action>
           </template>
         </v-list-item>
         <v-divider