Use colored chips in the overlay cards

aleksis/apps/lesrooster/frontend/components/timetable_management/TimetableOverlayCard.vue

 <script>
 import BlockingCard from "./BlockingCard.vue";
+import ColoredShortNameChip from "../common/ColoredShortNameChip.vue";
 
 export default {
   name: "TimetableOverlayCard",
-  components: {BlockingCard},
+  components: {ColoredShortNameChip, BlockingCard},
   props: {
     lesson: {
       type: Object,
@@ -51,11 +52,11 @@ export default {
 
 <template>
   <div>
-    <blocking-card v-if="rooms.length > 0" class="first" icon="mdi-home-off-outline" color="warning">
-      {{ rooms.map(room => room.shortName).join(", ") }}
+    <blocking-card v-for="room in rooms" icon="mdi-home-off-outline" color="warning">
+      <colored-short-name-chip class="short" :item="room" :elevation="0"/>
     </blocking-card>
-    <blocking-card v-if="teachers.length > 0" class="second" icon="mdi-account-off-outline" color="warning">
-      {{ teachers.map(teacher => teacher.shortName).join(", ") }}
+    <blocking-card v-for="teacher in teachers" icon="mdi-account-off-outline" color="warning">
+      <colored-short-name-chip class="short" :item="teacher" :elevation="0"/>
     </blocking-card>
   </div>
 </template>
@@ -65,18 +66,11 @@ div {
   grid-column: v-bind(x) / span v-bind(w);
   grid-row: v-bind(y) /span v-bind(h);
   z-index: 10;
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr;
-  grid-template-areas: "left right";
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   gap: 5px;
+  width: 100%;
+  height: 100%;
 }
-
-.first {
-  grid-area: left;
-}
-
-.second {
-  grid-area: right;
-}
-</style>
+</style>
\ No newline at end of file