Adopt shared WebUI layout primitives

webui/src/features/calendar/CalendarSettingsPanel.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Save } from "lucide-react";
-import {
+import { FormGrid, ContentGrid,
   Button,
   Card,
   DismissibleAlert,
@@ -124,12 +124,12 @@ export default function CalendarSettingsPanel({
   });
 
   return (
-    <div className="dashboard-grid settings-dashboard-grid calendar-settings-panel">
+    <ContentGrid columns={2} collapseAt="workspace" className="calendar-settings-panel">
       <div className="calendar-settings-documentation">
         <DocumentationHelpLink reference={CALENDAR_DOCUMENTATION} />
       </div>
       <Card title="Calendar display">
-        <div className="form-grid">
+        <FormGrid columns={1} collapseAt="standard" className="">
           <ToggleSwitch
             label="Dim weekends"
             help="Use a quieter background for Saturday and Sunday in week views."
@@ -147,7 +147,7 @@ export default function CalendarSettingsPanel({
               setDraft((current) => ({ ...current, dim_off_hours }))
             }
           />
-          <div className="calendar-dialog-grid-two">
+          <FormGrid columns={2} gap="small" collapseAt="narrow">
             <FormField label="Workday starts">
               <input
                 type="number"
@@ -178,11 +178,11 @@ export default function CalendarSettingsPanel({
                 }
               />
             </FormField>
-          </div>
-        </div>
+          </FormGrid>
+        </FormGrid>
       </Card>
       <Card title="Continuous view">
-        <div className="form-grid">
+        <FormGrid columns={1} collapseAt="standard" className="">
           <ToggleSwitch
             label="Virtualize distant weeks"
             help="Keep the continuous calendar responsive by rendering only nearby weeks."
@@ -240,9 +240,9 @@ export default function CalendarSettingsPanel({
               {message}
             </DismissibleAlert>
           )}
-        </div>
+        </FormGrid>
       </Card>
-    </div>
+    </ContentGrid>
   );
 }