ellipsis for EventItem's data_string

ui/src/components/calendar/EventDate.vue

@@ -1,9 +1,18 @@
 <template>
-  <div class="d-flex align-end justify-center mr-1 mr-md-2">
+  <div class="d-flex justify-center mr-1 mr-md-2">
-    <span class="d-flex text-h4 text-md-h3">{{ day }}</span>
+    <div class="d-flex flex-column align-end">
-    <span class="d-flex text-h5 text-md-h4 blue-grey--text text--darken-1">
+      <div class="d-flex align-end">
-      {{ month }}
+        <span class="d-flex text-h4 text-md-h3">{{ day }}</span>
-    </span>
+        <span class="d-flex text-h5 text-md-h4 blue-grey--text text--darken-1">
+          {{ month }}
+        </span>
+      </div>
+      <span
+        class="d-flex text-h6 text-md-h5 blue-grey--text text--lighten-1 mt-n1"
+      >
+        {{ time }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -23,13 +32,17 @@ export default class EventDate extends Vue {
   private get month(): string {
     return this.date.toFormat("MM.");
   }
+
+  private get time(): string {
+    return this.date.toLocaleString(DateTime.TIME_24_SIMPLE);
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "~vuetify/src/styles/settings/_variables";
 
-div {
+div.justify-center {
   min-width: 95px;
 
   @media #{map-get($display-breakpoints, "md-and-up")} {

ui/src/components/calendar/EventItem.vue

@@ -13,6 +13,8 @@
       </v-list-item-subtitle>
       <v-list-item-subtitle
         class="
+          d-inline-block
+          text-truncate
           thw-heading-font
           blue-grey--text
           text--darken-1