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

Closes #308

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

 <template>
   <v-card :class="{ 'my-1 full-width': true, 'd-flex flex-column': !compact }">
     <v-card-title v-if="!compact">
-      <lesson-information v-bind="documentationPartProps" />
+      <lesson-information
+        v-bind="{ ...$attrs, ...documentationPartProps }"
+        :is-create="false"
+        :gql-patch-mutation="documentationsMutation"
+      />
     </v-card-title>
 
     <v-card-text
@@ -11,13 +15,18 @@
         'pa-2': compact,
       }"
     >
-      <lesson-information v-if="compact" v-bind="documentationPartProps" />
-
-      <lesson-notes class="span-2" v-bind="documentationPartProps" />
+      <lesson-information
+        v-if="compact"
+        v-bind="documentationPartProps"
+        :is-create="false"
+        :gql-patch-mutation="documentationsMutation"
+      />
+      <v-spacer v-if="compact || !$vuetify.breakpoint.mobile" />
+      <lesson-notes v-bind="documentationPartProps" />
       <participation-list
         v-if="documentation.canEditParticipationStatus"
         :include-present="false"
-        class="participation-list"
+        :class="{'participation-list': compact || !$vuetify.breakpoint.mobile}"
         v-bind="documentationPartProps"
         :value="value"
         @input="$emit('input', $event)"
@@ -95,17 +104,13 @@ export default {
 .main-body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: min-content min-content;
-  column-gap: 1em;
+  gap: 1em;
 }
 .participation-list {
   grid-column-start: 1;
   grid-column-end: span 3;
 }
-.span-2 {
-  grid-column-end: span 2;
-}
-.vertical > * {
-  grid-column-end: span 3;
+.vertical {
+  grid-template-columns: 1fr;
 }
 </style>