From 89a7ffe977135e58acfc911d67608f5990568645 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Thu, 15 Sep 2022 20:30:25 +0000
Subject: [PATCH] responsivity: small screens

---
 ui/src/App.vue                                  | 3 ++-
 ui/src/components/Dashboard.vue                 | 6 +++---
 ui/src/components/calendar/CalendarCarousel.vue | 6 ++++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 00f3525..a6c771b 100644
--- a/ui/src/App.vue
+++ b/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"
diff --git a/ui/src/components/Dashboard.vue b/ui/src/components/Dashboard.vue
index c6b4f87..a971414 100644
--- a/ui/src/components/Dashboard.vue
+++ b/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>
diff --git a/ui/src/components/calendar/CalendarCarousel.vue b/ui/src/components/calendar/CalendarCarousel.vue
index 5659f00..9c51a7c 100644
--- a/ui/src/components/calendar/CalendarCarousel.vue
+++ b/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 {