refactor(webui): use shared Helpdesk dialog sizing
This commit is contained in:
@@ -178,7 +178,7 @@ function ProfileEditorDialog({ open, profile, saving, error, onClose, onSave }:
|
|||||||
useEffect(() => { if (open) setValues(profileValues(profile)); }, [open, profile]);
|
useEffect(() => { if (open) setValues(profileValues(profile)); }, [open, profile]);
|
||||||
function set<K extends keyof ProfileValues>(key: K, value: ProfileValues[K]) { setValues((current) => ({ ...current, [key]: value })); }
|
function set<K extends keyof ProfileValues>(key: K, value: ProfileValues[K]) { setValues((current) => ({ ...current, [key]: value })); }
|
||||||
function submit(event: FormEvent) { event.preventDefault(); void onSave(values); }
|
function submit(event: FormEvent) { event.preventDefault(); void onSave(values); }
|
||||||
return <Dialog open={open} title={profile ? "Edit Helpdesk profile" : "New Helpdesk profile"} onClose={onClose} closeDisabled={saving} className="helpdesk-editor-dialog" footer={<><Button onClick={onClose} disabled={saving}>Cancel</Button><Button type="submit" form="helpdesk-profile-form" variant="primary" disabled={saving}>{saving ? "Saving..." : "Save"}</Button></>}>
|
return <Dialog open={open} title={profile ? "Edit Helpdesk profile" : "New Helpdesk profile"} size="large" onClose={onClose} closeDisabled={saving} footer={<><Button onClick={onClose} disabled={saving}>Cancel</Button><Button type="submit" form="helpdesk-profile-form" variant="primary" disabled={saving}>{saving ? "Saving..." : "Save"}</Button></>}>
|
||||||
{error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
|
{error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
|
||||||
<FormLayout id="helpdesk-profile-form" columns={2} gap="compact" collapseAt="narrow" className="helpdesk-editor-form" onSubmit={submit}>
|
<FormLayout id="helpdesk-profile-form" columns={2} gap="compact" collapseAt="narrow" className="helpdesk-editor-form" onSubmit={submit}>
|
||||||
<label><FieldLabel help="Stable and immutable after creation.">Profile key</FieldLabel><input value={values.key} disabled={Boolean(profile)} required maxLength={120} onChange={(event) => set("key", event.target.value)} /></label>
|
<label><FieldLabel help="Stable and immutable after creation.">Profile key</FieldLabel><input value={values.key} disabled={Boolean(profile)} required maxLength={120} onChange={(event) => set("key", event.target.value)} /></label>
|
||||||
|
|||||||
@@ -15,7 +15,6 @@
|
|||||||
.helpdesk-facts strong, .helpdesk-targets strong { overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; }
|
.helpdesk-facts strong, .helpdesk-targets strong { overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; }
|
||||||
.helpdesk-targets, .helpdesk-policy-note { margin-top: 24px; }
|
.helpdesk-targets, .helpdesk-policy-note { margin-top: 24px; }
|
||||||
.helpdesk-targets h2, .helpdesk-policy-note h2 { margin: 0 0 10px; font-size: 0.98rem; letter-spacing: 0; }
|
.helpdesk-targets h2, .helpdesk-policy-note h2 { margin: 0 0 10px; font-size: 0.98rem; letter-spacing: 0; }
|
||||||
.helpdesk-editor-dialog { width: min(760px, calc(100vw - 32px)); }
|
|
||||||
.helpdesk-editor-form label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
|
.helpdesk-editor-form label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
|
||||||
.helpdesk-editor-form select[multiple] { min-height: 116px; }
|
.helpdesk-editor-form select[multiple] { min-height: 116px; }
|
||||||
.helpdesk-active-field { align-self: end; flex-direction: row !important; align-items: center; min-height: 38px; }
|
.helpdesk-active-field { align-self: end; flex-direction: row !important; align-items: center; min-height: 38px; }
|
||||||
|
|||||||
Reference in New Issue
Block a user