Fix mobile design of coursebook

aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue

@@ -10,9 +10,9 @@
       class="full-width d-flex flex-column align-stretch"
       :class="{ 'flex-md-row': compact }"
     >
-      <lesson-information v-if="compact" class="flex-110" v-bind="documentationPartProps" />
+      <lesson-information v-if="compact" :class="{ 'flex-110': !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
       <lesson-summary
-        :class="{ 'flex-110': compact }"
+        :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }"
         ref="summary"
         v-bind="{ ...$attrs, ...documentationPartProps }"
         :is-create="false"
@@ -21,7 +21,7 @@
         @loading="loading = $event"
         @save="$emit('close')"
       />
-      <lesson-notes :class="{ 'flex-110': compact }" v-bind="documentationPartProps" />
+      <lesson-notes :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
     </v-card-text>
     <v-divider />
     <v-card-actions v-if="!compact">

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue

@@ -24,7 +24,7 @@
           v-on="dialogActivator.on"
           :outlined="!documentation.homework"
           @click="$emit('open')"
-          class="mb-2 chip-width"
+          class="mb-2 max-width"
           dense
         >
           <span class="max-width text-truncate">{{
@@ -39,7 +39,7 @@
           v-on="dialogActivator.on"
           :outlined="!documentation.groupNote"
           @click="$emit('open')"
-          class="chip-width"
+          class="max-width"
           dense
         >
           <span class="max-width text-truncate">{{
@@ -170,6 +170,9 @@ export default {
     minWidth() {
       return Math.min(this.documentation?.topic?.length || 15, 15) + "ch";
     },
+    maxWidth() {
+      return this.$vuetify.breakpoint.mobile ? "100%" : "20ch";
+    }
   },
 };
 </script>
@@ -180,11 +183,7 @@ export default {
 }
 
 .max-width {
-  max-width: min(100%, 20ch);
-}
-
-.chip-width {
-  max-width: 20ch;
+  max-width: v-bind(maxWidth)
 }
 
 .gap {