Improve design of AbsenceCreationSummary

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

@@ -41,26 +41,34 @@
                 class="px-0"
                 :key="lesson.id"
               >
-                <!-- TODO: We should extract this display & share it -->
-                <time :datetime="lesson.datetimeStart" class="text-no-wrap">
-                  {{
-                    $d($parseISODate(lesson.datetimeStart), "shortWithWeekday")
-                  }}&nbsp;
-                </time>
-                <span>(</span>
-                <time :datetime="lesson.datetimeStart" class="text-no-wrap">
-                  {{ $d($parseISODate(lesson.datetimeStart), "shortTime") }}
-                </time>
-                <span>-</span>
-                <time :datetime="lesson.datetimeEnd" class="text-no-wrap">
-                  {{ $d($parseISODate(lesson.datetimeEnd), "shortTime") }}
-                </time>
-                <span>)</span>
-                <v-spacer />
-                <div class="pr-2">
-                  {{ lesson.course?.name }}
-                </div>
-                <subject-chip :subject="lesson.subject" />
+                <v-row>
+                  <!-- TODO: We should extract this display & share it -->
+                  <v-col cols="3">
+                    <time :datetime="lesson.datetimeStart" class="text-no-wrap">
+                      {{
+                        $d(
+                          $parseISODate(lesson.datetimeStart),
+                          "shortWithWeekday",
+                        )
+                      }}&nbsp;
+                    </time>
+                  </v-col>
+                  <v-col cols="3">
+                    <time :datetime="lesson.datetimeStart" class="text-no-wrap">
+                      {{ $d($parseISODate(lesson.datetimeStart), "shortTime") }}
+                    </time>
+                    <span> - </span>
+                    <time :datetime="lesson.datetimeEnd" class="text-no-wrap">
+                      {{ $d($parseISODate(lesson.datetimeEnd), "shortTime") }}
+                    </time>
+                  </v-col>
+                  <v-col cols="3">
+                    {{ lesson.course?.name }}
+                  </v-col>
+                  <v-col cols="3">
+                    <subject-chip :subject="lesson.subject" />
+                  </v-col>
+                </v-row>
               </v-list-item>
             </v-expansion-panel-content>
           </v-expansion-panel>