Improve look of coursebook on desktop

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

 <template>
   <v-card-text>
     <!-- compact -->
-    <v-text-field
-      dense
-      filled
-      v-if="compact"
-      :label="$t('alsijil.coursebook.summary.topic')"
-      :value="documentation.topic"
-      @input="topic=$event"
-      @focusout="save"
-      @keydown.enter="saveAndBlur"
-      :loading="loading"
-    />
-    <v-chip
+    <div
+      class="d-flex flex-column flex-md-row align-stretch align-md-center gap justify-start"
       v-if="compact"
-      outlined
-      @click="$emit('open')"
     >
-      {{
-        documentation.homework
-            ? $t("alsijil.coursebook.summary.homework.value", {homework: truncate(documentation.homework)})
-            : $t("alsijil.coursebook.summary.homework.empty")
-      }}
-    </v-chip>
-    <v-chip
-      v-if="compact"
-      outlined
-      @click="$emit('open')"
-    >
-      {{
-        documentation.groupNote
-            ? $t("alsijil.coursebook.summary.group_note.value", {groupNote: truncate(documentation.groupNote)})
-            : $t("alsijil.coursebook.summary.group_note.empty")
-      }}
-    </v-chip>
+      <v-text-field
+        class="flex-grow-1 min-width"
+        dense
+        hide-details
+        filled
+        :label="$t('alsijil.coursebook.summary.topic')"
+        :value="documentation.topic"
+        @input="topic = $event"
+        @focusout="save"
+        @keydown.enter="saveAndBlur"
+        :loading="loading"
+      />
+      <div class="d-flex flex-column align-start">
+        <v-chip
+          :outlined="!documentation.homework"
+          @click="$emit('open')"
+          class="mb-2 chip-width"
+        >
+          <span class="max-width text-truncate">{{
+            documentation.homework
+              ? $t("alsijil.coursebook.summary.homework.value", documentation)
+              : $t("alsijil.coursebook.summary.homework.empty")
+          }}</span>
+          <v-icon right v-if="documentation.homework"
+            >mdi-book-edit-outline</v-icon
+          >
+          <v-icon right v-else>mdi-book-plus-outline</v-icon>
+        </v-chip>
+        <v-chip
+          :outlined="!documentation.groupNote"
+          @click="$emit('open')"
+          class="chip-width"
+        >
+          <span class="max-width text-truncate">{{
+            documentation.groupNote
+              ? $t("alsijil.coursebook.summary.group_note.value", {
+                  groupNote: truncate(documentation.groupNote),
+                })
+              : $t("alsijil.coursebook.summary.group_note.empty")
+          }}</span>
+          <v-icon right v-if="documentation.groupNote"
+            >mdi-note-edit-outline</v-icon
+          >
+          <v-icon right v-else>mdi-note-plus-outline</v-icon>
+        </v-chip>
+      </div>
+    </div>
     <!-- not compact -->
     <!-- Are focusout & enter enough trigger? -->
     <v-text-field
@@ -136,3 +154,21 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.min-width {
+  min-width: 25ch;
+}
+
+.max-width {
+  max-width: min(100%, 40ch);
+}
+
+.chip-width {
+  max-width: 40ch;
+}
+
+.gap {
+  gap: 1em;
+}
+</style>