diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
index d19068f5363b24bed442c1645aecf40c96913f5b..dc54ea10442679cdf162b0a521310ea862ec7b39 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
+++ b/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">
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
index eec73bdb9a7cf13f1452d3e3334d68f780cce781..b594d056fc93a0c47f25a0a96e2b84a34ac18499 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
+++ b/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 {