Fix sizing issue + use better type declarations

src/components/FullCalendar/ICSAgenda.vue

@@ -44,6 +44,7 @@ import { locale } from "@/utils/i18n";
 import { computed, ref } from "vue";
 import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue";
 import FullCalendar from "@fullcalendar/vue3";
+import { EventSegment } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import iCalendarPlugin from "@fullcalendar/icalendar";
 import interactionPlugin from "@fullcalendar/interaction";
@@ -55,7 +56,7 @@ const props = defineProps<{
 
 const { t } = useI18n({ useScope: "global" });
 
-const listOfEventsByDate = ref<{ events: object[]; date?: string }>({
+const listOfEventsByDate = ref<{ events: EventSegment[]; date?: string }>({
   events: [],
   date: undefined,
 });
@@ -70,14 +71,14 @@ const calendarOptions = computed((): object => {
     },
     nextDayThreshold: "09:00:00",
     dayMaxEventRows: 0,
-    moreLinkClassNames: "bg-mbz-yellow dark:bg-mbz-purple dark:text-white p-2",
+    moreLinkClassNames: "bg-mbz-yellow dark:bg-mbz-purple dark:text-white",
     moreLinkContent: (arg: { num: number; text: string }) => {
       return "+" + arg.num.toString();
     },
     moreLinkClick: (info: {
       date: Date;
-      allSegs: object[];
-      hiddenSegs: [];
+      allSegs: EventSegment[];
+      hiddenSegs: EventSegment[];
       jsEvent: object;
     }) => {
       listOfEventsByDate.value = {
@@ -93,7 +94,7 @@ const calendarOptions = computed((): object => {
       )[0] as undefined | HTMLElement;
       moreLinkElement?.click();
     },
-    contentHeight: 350,
+    contentHeight: "auto",
     eventClassNames: "line-clamp-3 bg-mbz-yellow dark:bg-mbz-purple",
     headerToolbar: {
       left: "prev,next,today",
@@ -124,6 +125,8 @@ const calendarOptions = computed((): object => {
 
 .agenda-view .fc-daygrid-day-events {
   min-height: 1.1rem !important;
+  margin-bottom: 0.2rem !important;
+  margin-left: 0.1rem !important;
 }
 
 .clock-icon {