Reduced some spacing on mobile

components/calendar/event/Details.vue

@@ -3,6 +3,7 @@ import { cn } from "~/lib/utils"
 import type { RPGDate } from "~/models/Date"
 import type { CalendarEvent } from "~/models/CalendarEvent"
 import { useCalendar } from "~/stores/CalendarStore"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 
 import {
   PhHourglassMedium,
@@ -24,6 +25,10 @@ const props = defineProps<{
   isEndEvent?: boolean
 }>()
 
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+
 // Ref for the popover
 const eventDetails = ref<HTMLElement>()
 
@@ -64,9 +69,9 @@ function deployDeleteModal() {
   <UiPopoverContent
     class="w-96 event-popover"
     :align="'center'"
-    :align-offset="50"
-    :side="'left'"
-    :collision-padding="60"
+    :align-offset="breakpoints.lg.value ? 50 : 25"
+    :side="breakpoints.lg.value ? 'left' : 'top'"
+    :collision-padding="breakpoints.lg.value ? 50 : 25"
     :hide-when-detached="true"
     :class="cn(
       event.category ? `element-${event.category.color}` : '',

components/calendar/event/Event.vue

@@ -55,7 +55,7 @@ onMounted(() => {
   <UiPopover v-model:open="isPopoverDetailsOpen">
     <UiPopoverTrigger as-child>
       <button
-        class="event-button text-xs px-2 py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
+        class="event-button text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
         :class="
           cn(
             `element-${event.category?.color}`,