Ensure that all content of LessonEventBar is in the event bar

aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/LessonEventBar.vue

@@ -27,31 +27,35 @@
         >
           {{ eventParsed.start.time }}
         </span>
-        <div class="d-flex justify-center align-center flex-wrap flex-grow-1">
-          <lesson-event-link-iterator
-            v-if="!selectedEvent.meta.is_member"
-            :items="selectedEvent.meta.groups"
-            attr="short_name"
-            class="mr-1"
-          />
-          <lesson-event-old-new
-            v-if="!selectedEvent.meta.is_teacher || newTeachers.length > 0"
-            :new-items="newTeachers"
-            :old-items="oldTeachers"
-            attr="short_name"
-            class="mr-1"
-          />
+        <div
+          class="d-flex justify-center align-center flex-grow-1 text-truncate"
+        >
+          <div class="d-flex justify-center align-center flex-wrap text">
+            <lesson-event-link-iterator
+              v-if="!selectedEvent.meta.is_member"
+              :items="selectedEvent.meta.groups"
+              attr="short_name"
+              class="mr-1"
+            />
+            <lesson-event-old-new
+              v-if="!selectedEvent.meta.is_teacher || newTeachers.length > 0"
+              :new-items="newTeachers"
+              :old-items="oldTeachers"
+              attr="short_name"
+              class="mr-1"
+            />
 
-          <lesson-event-subject
-            :event="selectedEvent"
-            attr="short_name"
-            class="font-weight-medium mr-1"
-          />
-          <lesson-event-old-new
-            :new-items="newRooms"
-            :old-items="oldRooms"
-            attr="short_name"
-          />
+            <lesson-event-subject
+              :event="selectedEvent"
+              attr="short_name"
+              class="font-weight-medium mr-1"
+            />
+            <lesson-event-old-new
+              :new-items="newRooms"
+              :old-items="oldRooms"
+              attr="short_name"
+            />
+          </div>
         </div>
       </div>
     </template>
@@ -85,10 +89,15 @@ export default {
 
 <style scoped>
 .orange-border {
-  border: 4px orange solid;
+  border: 3px orange solid;
 }
 
 .red-border {
-  border: 4px red solid;
+  border: 3px red solid;
+}
+
+.text {
+  line-height: 1.1;
+  font-size: 12px;
 }
 </style>