config uislopping

webui/src/admin/components/ConfigurationEditor.jsx

@@ -2,6 +2,7 @@
 // Purpose: Connects the one hierarchical configuration form to revision, secret, validation, and save behavior.
 // Scope: Edits and saves one complete configuration document as one immutable revision.
 import { useEffect, useMemo, useState } from 'react';
+import CardFrame from '../../components/CardFrame/index.jsx';
 import { updateConfiguration } from '../api.js';
 import SchemaConfigurationForm from './SchemaConfigurationForm.jsx';
 
@@ -63,12 +64,12 @@ export default function ConfigurationEditor({ snapshot, socket, runSensitive, on
 
   return (
     <div className="space-y-0.5">
-      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-0.5 border border-neutral-500/60 bg-neutral-900/95 p-0.5 backdrop-blur">
-        <div>
-          <p className="font-semibold text-slate-100">Configuration</p>
-          <p className="text-[0.7rem] text-slate-400">Editing the complete revision {revision}. Saved changes apply after an application restart.</p>
-        </div>
-        <div className="flex gap-0.5">
+      <CardFrame className="sticky top-0 z-20 bg-neutral-900/95 backdrop-blur" title="Configuration" meta={`revision ${revision}`} bodyClassName="space-y-0.5 p-0.5">
+        <p className="text-[0.7rem] text-slate-400">Saved changes apply after an application restart.</p>
+        {/* All document actions stay together at the start of the toolbar. The
+            editor may use a wide canvas, but width is never used to separate a
+            control from the content that explains it. */}
+        <div className="flex flex-wrap gap-0.5">
           <button type="button" className="button-dark" disabled={saving} onClick={onReload}>Reload</button>
           <button type="button" className="button-dark" disabled={!dirty || saving} onClick={() => {
             setDraft(clone(serverValue));
@@ -76,7 +77,7 @@ export default function ConfigurationEditor({ snapshot, socket, runSensitive, on
           }}>Reset</button>
           <button type="button" className="button-dark" disabled={!dirty || saving} onClick={save}>{saving ? 'Saving…' : 'Save configuration'}</button>
         </div>
-      </div>
+      </CardFrame>
       {error ? <p className="border border-red-500/60 bg-red-950/40 p-1 text-xs text-red-100">{error}</p> : null}
       {validationErrors.length ? (
         <div className="border border-red-500/60 bg-red-950/40 p-1 text-xs text-red-100">