Add shared WebUI layout primitives

webui/src/components/CredentialEnvelopeManager.tsx

@@ -1,3 +1,4 @@
+import { FormGrid } from "./ContentGrid";
 import { useEffect, useMemo, useState } from "react";
 import { KeyRound, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
 import type {
@@ -504,14 +505,14 @@ export default function CredentialEnvelopeManager({
         </LoadingFrame>
       </Card>
 
-      <Dialog
+      <Dialog variant="administration" size="wide"
         open={Boolean(editing)}
         title={editing === "new" ? "Add reusable credential" : "Edit reusable credential"}
         helpContextId="access.credentials.editor"
         helpModuleId="access"
         onClose={closeEditor}
         closeDisabled={saving}
-        className="admin-dialog admin-dialog-wide adaptive-config-dialog"
+        className="adaptive-config-dialog"
         footerClassName="button-row compact-actions"
         footer={
           <>
@@ -528,7 +529,7 @@ export default function CredentialEnvelopeManager({
               <h3>Identity</h3>
               <p>The name and type are visible; secret values are never returned by the API.</p>
             </header>
-            <div className="form-grid two">
+            <FormGrid columns={2} collapseAt="standard" className="">
               <FormField label="Name" helpContextId="access.credentials.field.name" helpModuleId="access">
                 <input data-help-context-id="access.credentials.field.name" data-help-module-id="access" value={draft.name} disabled={saving} onChange={(event) => setDraft({ ...draft, name: event.target.value })} autoFocus />
               </FormField>
@@ -563,14 +564,14 @@ export default function CredentialEnvelopeManager({
                   label="Remove configured secret"
                 />
               )}
-            </div>
+            </FormGrid>
           </section>
           <section className="adaptive-config-section">
             <header>
               <h3>Availability</h3>
               <p>Empty module or server lists mean every module or server allowed by scope.</p>
             </header>
-            <div className="form-grid two">
+            <FormGrid columns={2} collapseAt="standard" className="">
               <FormField label="Modules" help="Choose installed modules that may use this credential. Empty means every module allowed by scope." helpContextId="access.credentials.field.allowed-modules" helpModuleId="access">
                 <ReferenceMultiSelect
                   values={splitValues(draft.allowedModules)}
@@ -594,7 +595,7 @@ export default function CredentialEnvelopeManager({
               </FormField>
               <ToggleSwitch checked={draft.inheritToLowerScopes} disabled={saving} helpContextId="access.credentials.field.inherit-to-lower-scopes" helpModuleId="access" onChange={(inheritToLowerScopes) => setDraft({ ...draft, inheritToLowerScopes })} label="Visible to lower scopes" />
               <ToggleSwitch checked={draft.isActive} disabled={saving} helpContextId="access.credentials.field.active" helpModuleId="access" onChange={(isActive) => setDraft({ ...draft, isActive })} label="Active" />
-            </div>
+            </FormGrid>
           </section>
         </div>
       </Dialog>