Adopt shared WebUI structural primitives

webui/src/features/calendar/CalendarEventDialog.tsx

@@ -355,7 +355,7 @@ export function CalendarEventDialog({
           <input value={location} onChange={(item) => setLocation(item.target.value)} maxLength={500} disabled={saving || !canWrite} />
         </label>
         <ToggleSwitch label="i18n:govoplan-calendar.whole_day.951c82d1" checked={allDay} disabled={saving || !canWrite} onChange={handleAllDayChange} />
-        <div className="calendar-dialog-date-row">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
           <label>
             <span>i18n:govoplan-calendar.start_date.ff99f5b5</span>
             <DateField value={startDate} onChange={handleStartDateChange} required disabled={saving || !canWrite} />
@@ -364,9 +364,9 @@ export function CalendarEventDialog({
             <span>i18n:govoplan-calendar.start_time.88d8206d</span>
             <TimeField value={startTime} onChange={handleStartTimeChange} disabled={saving || !canWrite || allDay} />
           </label>
-        </div>
+        </FormGrid>
         {!allDay &&
-        <div className="calendar-dialog-date-row">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
             <label>
               <span>i18n:govoplan-calendar.end_mode.5a06de37</span>
               <select value={endMode} onChange={(item) => setEndMode(item.target.value as CalendarEventEndMode)} disabled={saving || !canWrite}>
@@ -380,10 +380,10 @@ export function CalendarEventDialog({
                 <input type="number" min={1} step={60} value={durationSeconds} onChange={(item) => setDurationSeconds(item.target.value)} required disabled={saving || !canWrite} />
               </label>
           }
-          </div>
+        </FormGrid>
         }
         {(allDay || endMode === "end") &&
-        <div className="calendar-dialog-date-row">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
             <label>
               <span>i18n:govoplan-calendar.end_date.89d10cd6</span>
               <DateField value={endDate} min={startDate} onChange={setEndDate} required disabled={saving || !canWrite} />
@@ -392,7 +392,7 @@ export function CalendarEventDialog({
               <span>i18n:govoplan-calendar.end_time.cd7800da</span>
               <TimeField value={endTime} min={!allDay && startDate === endDate ? startTime : undefined} onChange={setEndTime} disabled={saving || !canWrite || allDay} />
             </label>
-          </div>
+        </FormGrid>
         }
         <details className="calendar-advanced-settings calendar-vevent-details">
           <summary>i18n:govoplan-calendar.vevent.9cf5be75</summary>