responsivity: small screens

ui/src/App.vue

@@ -8,7 +8,7 @@
       />
       <Dashboard>
         <template slot="message">
-          <div class="d-flex flex-column fill-height pb-12">
+          <div class="d-flex flex-column fill-height pb-sm-12">
             <Message :html="message_html" />
             <ImageCarousel
               class="mt-auto"
@@ -23,6 +23,7 @@
         <template slot="calendars">
           <CalendarCarousel :speed="calendar_speed" :data="calendar_data" />
           <DashboardInfo
+            class="pb-12 pb-sm-0"
             :server_host="server_host"
             :server_name="server_name"
             :version="dashboard_version"

ui/src/components/Dashboard.vue

@@ -1,10 +1,10 @@
 <template>
   <v-container fill-height class="pa-0">
-    <v-layout>
-      <v-col cols="4">
+    <v-layout class="flex-wrap">
+      <v-col cols="12" sm="4">
         <slot name="message">MESSAGE</slot>
       </v-col>
-      <v-col cols="8">
+      <v-col cols="12" sm="8">
         <slot name="calendars">CALENDARS</slot>
       </v-col>
     </v-layout>

ui/src/components/calendar/CalendarCarousel.vue

@@ -76,8 +76,14 @@ export default class CalendarCarousel extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@import "~vuetify/src/styles/settings/_variables";
+
 .v-carousel:deep() > div {
   max-height: 500px;
+
+  @media #{map-get($display-breakpoints, "sm-and-down")} {
+    min-height: 500px;
+  }
 }
 
 .v-window {