Fix coursebook layout

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

@@ -26,24 +26,26 @@ import PersonChip from "aleksis.core/components/person/PersonChip.vue";
     >
       {{ documentation.course?.name }}
     </span>
-    <subject-chip
-      v-if="documentation.subject"
-      :subject="documentation.subject"
-      v-bind="compact ? dialogActivator.attrs : {}"
-      v-on="compact ? dialogActivator.on : {}"
-    />
-    <subject-chip
-      v-if="
-        documentation?.lessonEvent?.amends?.subject &&
-        documentation.lessonEvent.amends.subject.id !== documentation.subject.id
-      "
-      :subject="documentation.lessonEvent.amends.subject"
-      v-bind="compact ? dialogActivator.attrs : {}"
-      v-on="compact ? dialogActivator.on : {}"
-      class="text-decoration-line-through"
-      disabled
-    />
-    <div :class="{ 'd-flex align-center flex-wrap gap': true }">
+    <div :class="{ 'd-flex align-center flex-wrap gap': true, 'justify-center': largeGrid, 'justify-start': !largeGrid }">
+      <subject-chip
+        v-if="documentation.subject"
+        :subject="documentation.subject"
+        v-bind="compact ? dialogActivator.attrs : {}"
+        v-on="compact ? dialogActivator.on : {}"
+      />
+      <subject-chip
+        v-if="
+          documentation?.lessonEvent?.amends?.subject &&
+          documentation.lessonEvent.amends.subject.id !== documentation.subject.id
+        "
+        :subject="documentation.lessonEvent.amends.subject"
+        v-bind="compact ? dialogActivator.attrs : {}"
+        v-on="compact ? dialogActivator.on : {}"
+        class="text-decoration-line-through"
+        disabled
+      />
+    </div>
+    <div :class="{ 'd-flex align-center flex-wrap gap': true, 'justify-end': !largeGrid }">
       <person-chip
         v-for="teacher in documentation.teachers"
         :key="documentation.id + '-teacher-' + teacher.id"
@@ -103,7 +105,7 @@ export default {
 <style scoped>
 .grid {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 1em;
   align-content: start;
@@ -114,17 +116,6 @@ export default {
   align-content: unset;
 }
 
-.grid:not(.large-grid):nth-child(odd) {
-  justify-self: start;
-}
-.grid:not(.large-grid):nth-child(even) {
-  justify-self: end;
-}
-
-.grid.large-grid:nth-child(3) {
-  justify-self: center;
-}
-
 .grid:last-child {
   justify-self: end;
   justify-content: end;