Adopt shared WebUI layout primitives

webui/src/features/calendar/CalendarCollectionDialogs.tsx

@@ -6,7 +6,7 @@ import {
   type FormEvent,
 } from "react";
 import { ArrowRightLeft, ListChecks, RefreshCw, Trash2 } from "lucide-react";
-import {
+import { FormGrid, DialogForm,
   ActionBlockerHint,
   Button,
   ColorPickerField,
@@ -372,7 +372,7 @@ export function CalendarCollectionDialog({
         </>
       }>
 
-      <form id={formId} className="calendar-dialog-form" onSubmit={submit}>
+      <DialogForm id={formId} className="calendar-dialog-form" onSubmit={submit}>
         <div className="calendar-dialog-documentation">
           <DocumentationHelpLink reference={CALENDAR_SOURCE_DOCUMENTATION} />
         </div>
@@ -443,7 +443,7 @@ export function CalendarCollectionDialog({
                 </span>
             }
             </div>
-            <div className="calendar-caldav-setup">
+            <FormGrid columns={2} gap="small" collapseAt="narrow" className="calendar-caldav-setup">
               <label className="calendar-dialog-wide">
                 <span>{calendarSourceUrlLabel(sourceMode)}</span>
                 <input
@@ -532,7 +532,7 @@ export function CalendarCollectionDialog({
               }
                 {effectiveCollectionUrl && <span>{effectiveCollectionUrl}</span>}
               </div>
-            </div>
+            </FormGrid>
             {discoveryError && <p className="calendar-form-error">{discoveryError}</p>}
             {calendarSourceUsesCalDav(sourceMode) && discoveredCalendars.length > 0 &&
           <label>
@@ -548,13 +548,13 @@ export function CalendarCollectionDialog({
           }
             <details className="calendar-advanced-settings">
               <summary>i18n:govoplan-calendar.advanced.4d064726</summary>
-              <div className="calendar-dialog-grid-two">
+              <FormGrid columns={2} gap="small" collapseAt="narrow">
                 <label>
                   <span>i18n:govoplan-calendar.display_name.c7874aaa</span>
                   <input value={displayName} onChange={(item) => setDisplayName(item.target.value)} maxLength={255} disabled={saving || !canEditMutableSourceSettings} />
                 </label>
-              </div>
-              <div className="calendar-sync-settings">
+              </FormGrid>
+              <FormGrid columns={2} gap="small" collapseAt="narrow">
                 <ToggleSwitch label="i18n:govoplan-calendar.automatic_sync.084644b2" checked={syncEnabled} disabled={saving || !canEditMutableSourceSettings} onChange={setSyncEnabled} />
                 <label>
                   <span>i18n:govoplan-calendar.interval.011efcd5</span>
@@ -574,7 +574,7 @@ export function CalendarCollectionDialog({
                     <option value="overwrite">i18n:govoplan-calendar.overwrite_remote.39625e32</option>
                   </select>
                 </label>
-              </div>
+              </FormGrid>
             </details>
             {source &&
           <div className="calendar-sync-status-panel">
@@ -614,7 +614,7 @@ export function CalendarCollectionDialog({
             {needsSourceSecret && <p className="calendar-form-note">i18n:govoplan-calendar.enter_a_password_or_token_for_this_source.74c09a54</p>}
           </section>
         }
-      </form>
+      </DialogForm>
     </Dialog>);
 
 }