ui/src/components/calendar/ViewCalendarEvent.vue

@@ -31,9 +31,14 @@ watch(
     { immediate: true }
 );
 
+watch(loaded, (value) => {
+    if (value) emit('load');
+});
+
 const emit = defineEmits<{
     (e: 'close'): void
     (e: 'reload'): void
+    (e: 'load'): void
     (e: 'edit', event: CalendarEvent): void
 }>()
 
@@ -302,11 +307,14 @@ defineExpose({ forceReload })
             </section>
         </div>
     </div>
-    <div v-else class="flex justify-center h-full items-center">
-        <Button variant="ghost" size="icon" @click="emit('close')">
+    <div v-else class="relative flex justify-center items-center h-full">
+        <!-- Close button (top-right) -->
+        <Button variant="ghost" size="icon" class="absolute top-2 right-2" @click="emit('close')">
             <X class="size-5" />
         </Button>
 
-        <Spinner class="size-8"></Spinner>
+        <!-- Spinner (centered) -->
+        <Spinner class="size-8" />
     </div>
+
 </template>

ui/src/pages/Calendar.vue

@@ -211,7 +211,7 @@ onMounted(() => {
                 class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
                 <ViewCalendarEvent ref="eventViewRef" :key="currentEventID" @close="() => { router.push('/calendar'); }"
-                    @reload="loadEvents()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
+                    @reload="loadEvents()" @load="calendarRef.getApi().updateSize()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
                 </ViewCalendarEvent>
             </aside>
         </div>