Make CalendarWithControls more dense

aleksis/core/frontend/components/calendar/CalendarControlBar.vue

@@ -6,15 +6,14 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex justify-center">
-    <v-btn icon class="mx-2" @click="$emit('prev')">
+  <div class="d-flex justify-center mx-2">
+    <v-btn icon @click="$emit('prev')">
       <v-icon>mdi-chevron-left</v-icon>
     </v-btn>
-    <v-btn outlined text class="mx-2" @click="$emit('today')">
-      <v-icon left>mdi-calendar-today-outline</v-icon>
+    <v-btn outlined text class="mx-1" @click="$emit('today')">
       {{ $t("calendar.today") }}
     </v-btn>
-    <v-btn icon class="mx-2" @click="$emit('next')">
+    <v-btn icon @click="$emit('next')">
       <v-icon>mdi-chevron-right</v-icon>
     </v-btn>
   </div>

aleksis/core/frontend/components/calendar/CalendarWithControls.vue

 <template>
   <div>
+    <div
+      class="mx-2 mb-2 text-center"
+      v-if="$refs.calendar && $vuetify.breakpoint.smAndDown"
+    >
+      {{ $refs.calendar.title }}
+    </div>
+
     <div class="d-flex mb-3 justify-space-between">
       <!-- Control bar with prev, next and today buttons -->
       <calendar-control-bar
@@ -9,7 +16,9 @@
       />
 
       <!-- Calendar title with current calendar time range -->
-      <div class="mx-2" v-if="$refs.calendar">{{ $refs.calendar.title }}</div>
+      <div class="mx-2" v-if="$refs.calendar && $vuetify.breakpoint.mdAndUp">
+        {{ $refs.calendar.title }}
+      </div>
 
       <calendar-type-select v-model="calendarType" />
     </div>