src/components/EventDialog.vue

@@ -473,6 +473,34 @@ const formattedOccurrenceShort = computed(() => {
   return ''
 })
 
+// Short date shown in header (works for create, edit base, and occurrence)
+const headerDateShort = computed(() => {
+  // If editing a specific occurrence use that date
+  if (occurrenceContext.value?.occurrenceDate) {
+    try {
+      return occurrenceContext.value.occurrenceDate
+        .toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+        .replace(/, /, ' ')
+    } catch {
+      return ''
+    }
+  }
+  // Otherwise use the base event start date (covers create + edit base)
+  if (editingEventId.value) {
+    const ev = calendarStore.getEventById(editingEventId.value)
+    if (ev?.startDate) {
+      try {
+        return new Date(ev.startDate + 'T00:00:00')
+          .toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+          .replace(/, /, ' ')
+      } catch {
+        return ''
+      }
+    }
+  }
+  return ''
+})
+
 const finalOccurrenceDate = computed(() => {
   if (!recurrenceEnabled.value) return null
   const count = recurrenceOccurrences.value
@@ -652,9 +680,12 @@ const recurrenceSummary = computed(() => {
 /* Modal dialog */
 .ec-modal {
   position: fixed;
-  top: 50%;
+  /* Position near bottom-right by default */
-  left: 50%;
+  top: auto;
-  transform: translate(-50%, -50%);
+  bottom: 5%;
+  right: 2em;
+  left: auto;
+  transform: none;
   background: color-mix(in srgb, var(--panel) 85%, transparent);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);