Adopt shared WebUI layout primitives

webui/src/features/notifications/NotificationSettingsPanel.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Mail, Save } from "lucide-react";
-import {
+import { FormGrid, ContentGrid,
   ActionBlockerHint,
   Button,
   Card,
@@ -182,7 +182,7 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
   const digestToggleDisabled = preferenceControlsDisabled || !mailAvailable || !draft.email_enabled;
 
   return (
-    <div className="dashboard-grid settings-dashboard-grid notifications-settings-panel">
+    <ContentGrid columns={2} collapseAt="workspace" className="notifications-settings-panel">
       <div className="notifications-settings-documentation">
         <DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
       </div>
@@ -201,7 +201,7 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
         />
       ) : null}
       <Card title="i18n:govoplan-notifications.notifications">
-        <div className="form-grid">
+        <FormGrid columns={1} collapseAt="standard" className="">
           <ToggleSwitch
             label="i18n:govoplan-notifications.unread_badge"
             help="i18n:govoplan-notifications.unread_badge_help"
@@ -228,10 +228,10 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
             </Button>
           </div>
           {message ? <DismissibleAlert tone={messageTone} resetKey={message} floating>{message}</DismissibleAlert> : null}
-        </div>
+        </FormGrid>
       </Card>
       <Card title="i18n:govoplan-notifications.delivery">
-        <div className="form-grid">
+        <FormGrid columns={1} collapseAt="standard" className="">
           <DocumentationHelpLink reference={NOTIFICATIONS_DELIVERY_DOCUMENTATION} />
           <div className="notifications-settings-inline-title">
             <Mail size={16} />
@@ -265,8 +265,8 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
             disabled={digestToggleDisabled}
             onChange={(value) => setDraft((current) => ({ ...current, email_digest_enabled: value }))}
           />
-        </div>
+        </FormGrid>
       </Card>
-    </div>
+    </ContentGrid>
   );
 }