add styling option for wide calendar view

src/components/CustomCalendar.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col w-full h-full gap-2 justify-between overflow-hidden">
-    <div class="flex flex-row gap-2 max-xl:flex-wrap justify-between max-sm:justify-center">
-      <div class="flex flex-row max-xl:order-2">
+    <div
+      class="flex flex-row gap-2 justify-between max-sm:justify-center"
+      :class="smallStyling ? 'max-lg:flex-wrap' : 'max-xl:flex-wrap'"
+    >
+      <div class="flex flex-row" :class="smallStyling ? 'max-lg:order-2' : 'max-xl:order-2'">
         <button
           :primary="view == 'dayGridMonth'"
           :primary-outline="view != 'dayGridMonth'"
@@ -27,8 +30,10 @@
           Liste
         </button>
       </div>
-      <p class="text-3xl w-full max-xl:order-1 text-center">{{ currentTitle }}</p>
-      <div class="flex flex-row max-xl:order-3">
+      <p class="text-3xl w-full text-center" :class="smallStyling ? 'max-lg:order-1' : 'max-xl:order-1'">
+        {{ currentTitle }}
+      </p>
+      <div class="flex flex-row" :class="smallStyling ? 'max-lg:order-3' : 'max-xl:order-3'">
         <button primary-outline class="rounded-r-none!" @click="navigateView('prev')">
           <ChevronLeftIcon />
         </button>
@@ -83,6 +88,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    smallStyling: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     dateSelect: ({ start, end, allDay }: { start: string; end: string; allDay: boolean }) => {

src/views/public/calendar/Calendar.vue

@@ -12,7 +12,12 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
-        <CustomCalendar :items="formattedItems" :allow-interaction="false" @event-select="eventClick" />
+        <CustomCalendar
+          :items="formattedItems"
+          :allow-interaction="false"
+          :small-styling="true"
+          @event-select="eventClick"
+        />
       </div>
     </template>
   </MainTemplate>