From 791fa06ddd5596876bd8ce18d6ebc164d236c366 Mon Sep 17 00:00:00 2001
From: David <darranz@rodax-software.com>
Date: Fri, 9 Oct 2026 20:30:41 +0200
Subject: [PATCH] =?UTF-8?q?Mejora=20en=20los=20cuadros=20de=20di=C3=A1logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/componentes-de-interfaz.md               |  10 +
 modules/assets/src/common/locales/en.json     |   4 +
 modules/assets/src/common/locales/es.json     |   4 +
 .../end/ui/end-relationship-dialog.tsx        |  14 +-
 .../shared/ui/relationship-form.tsx           |  95 +++---
 .../src/web/assets/shared/ui/asset-form.tsx   | 312 +++++++++---------
 .../src/web/brands/shared/ui/brand-form.tsx   |  96 +++---
 .../catalog-fields/shared/ui/catalog-form.tsx |  94 +++---
 .../shared/ui/catalog-relation-form.tsx       |  85 ++---
 .../shared/ui/catalog-template-form.tsx       | 155 ++++-----
 .../shared/ui/support-form.tsx                | 140 ++++----
 .../shared/ui/support-tool-form.tsx           |  48 +--
 .../shared/ui/workstation-form.tsx            | 268 +++++++--------
 .../access/create/ui/quick-create-dialog.tsx  |  80 ++---
 .../access/shared/ui/access-form-fields.tsx   |  96 +++---
 .../ui/application-configuration-form.tsx     | 226 ++++++-------
 .../assignments/shared/ui/assignment-form.tsx | 124 +++----
 .../ui/certificate-configuration-form.tsx     | 188 +++++------
 .../web/companies/shared/ui/company-form.tsx  |  70 ++--
 .../departments/shared/ui/department-form.tsx |  44 +--
 .../shared/ui/folder-mapping-form.tsx         | 176 +++++-----
 .../shared/ui/template-form.tsx               |  96 +++---
 .../shared/ui/intervention-form.tsx           | 192 +++++------
 .../shared/ui/mail-configuration-form.tsx     | 130 ++++----
 .../shared/ui/mailbox-use-form.tsx            | 142 ++++----
 .../people/shared/ui/person-editor-dialog.tsx |   2 +-
 .../src/web/people/shared/ui/person-form.tsx  |  88 ++---
 .../shared/ui/printer-configuration-form.tsx  | 223 +++++++------
 .../shared/ui/process-template-form.tsx       | 109 +++---
 .../processes/start/ui/process-start-form.tsx | 136 ++++----
 .../processes/update/ui/process-edit-form.tsx |  87 ++---
 .../shared/ui/remote-connection-form.tsx      | 182 +++++-----
 .../src/web/sites/shared/ui/site-form.tsx     |  48 +--
 .../shared/ui/telework-authorization-form.tsx | 148 +++++----
 .../src/web/tickets/shared/ui/ticket-form.tsx | 202 ++++++------
 .../shared/ui/work-profile-form.tsx           | 168 +++++-----
 .../web/passwords/shared/ui/password-form.tsx |  72 ++--
 .../users/shared/ui/user-editor-dialog.tsx    |   1 +
 .../src/web/users/shared/ui/user-form.tsx     | 106 +++---
 modules/resources/src/common/locales/en.json  |   4 +
 modules/resources/src/common/locales/es.json  |   4 +
 .../catalog-fields/shared/ui/catalog-form.tsx |  94 +++---
 .../shared/ui/catalog-template-form.tsx       | 199 +++++------
 .../web/resources/shared/ui/resource-form.tsx | 211 ++++++------
 .../rdx-ui/src/components/field-sections.tsx  |  14 +-
 .../rdx-ui/src/components/form-dialog.tsx     |  37 ++-
 .../rdx-ui/src/components/form-section.tsx    |  15 +
 .../components/template-sections-editor.tsx   | 130 ++++----
 48 files changed, 2681 insertions(+), 2488 deletions(-)
 create mode 100644 packages/rdx-ui/src/components/form-section.tsx

diff --git a/docs/componentes-de-interfaz.md b/docs/componentes-de-interfaz.md
index 2f45ca9..9c224e5 100644
--- a/docs/componentes-de-interfaz.md
+++ b/docs/componentes-de-interfaz.md
@@ -285,3 +285,13 @@ contrae el menú y conservan la selección y las ayudas del botón de navegació
 Componentes de @repo/rdx-ui independientes de los DTO, consultas y endpoints de Metis Desk. FieldSections recibe secciones, elementos con sectionId opcional y renderItem; presenta una cuadrícula plana cuando no hay secciones, o bloques desplegables accesibles con descripción y «Sin sección». Admite presentación de valores como listas de descripción y apertura ante errores externos.
 
 TemplateSectionsEditor recibe secciones, referencias de campos, nombres, textos traducidos, generador de identidad y onChange. Permite ordenar secciones/campos, editar nombre/descripción, asignar campos y mantener su obligatoriedad mediante SwitchField. El módulo consumidor conserva el estado en React Hook Form y genera UUID v7. Los helpers removeTemplateSection y copyTemplateLayout conservan referencias y remapean identidades respectivamente. No se modifican los componentes vendor.
+
+## Formularios modales adaptativos
+
+`FormDialog` admite `size="small" | "medium" | "large"`. Los formularios sencillos mantienen el tamaño pequeño; personas y usuarios emplean el intermedio. `wide` sigue siendo un alias del tamaño grande: 90 % del ancho disponible, con máximo de 1.200 px y márgenes en móvil. No se ensanchan automáticamente las altas sencillas.
+
+La cabecera permanece visible. Un formulario modal utiliza una raíz flex con altura mínima cero, `FormBody` para campos, errores y ayuda, y `FormActions` como hermano final fuera del cuerpo desplazable. Los botones permanecen dentro del formulario HTML original: se conservan envío por teclado, validación nativa, estados pendientes y cancelación. La ayuda queda al final del cuerpo, inmediatamente antes de las acciones. Los diálogos de consulta conservan el cuerpo desplazable y su pie externo.
+
+`FormSection` agrupa datos relacionados mediante título accesible y un borde discreto. Activos, recursos y plantillas lo utilizan para sus datos principales. Las características y las secciones del editor se distribuyen en dos bloques por fila cuando el contenedor dispone de al menos 900 px; los controles dentro de cada bloque mantienen una o dos columnas según el espacio. Una plantilla sin secciones puede aprovechar hasta tres columnas de características. Observaciones y ayuda ocupan toda la fila. La disposición responde al espacio del modal, no solo al ancho del navegador.
+
+El desplazamiento vertical se conserva cuando el contenido supera la altura disponible; no se ocultan campos ni se reduce artificialmente su tamaño para eliminarlo. No se introducen pestañas ni páginas nuevas sin una necesidad específica del formulario.
diff --git a/modules/assets/src/common/locales/en.json b/modules/assets/src/common/locales/en.json
index ee1db54..8f7c8dd 100644
--- a/modules/assets/src/common/locales/en.json
+++ b/modules/assets/src/common/locales/en.json
@@ -299,5 +299,9 @@
     "assign": "Section",
     "help": "Organize fields without changing their values or requirements. Removing a section moves its fields to Unsectioned.",
     "empty": "This section has no fields yet."
+  },
+  "formLayout": {
+    "identity": "Identification and assignment",
+    "template": "Template details"
   }
 }
diff --git a/modules/assets/src/common/locales/es.json b/modules/assets/src/common/locales/es.json
index 802892f..4a1a15b 100644
--- a/modules/assets/src/common/locales/es.json
+++ b/modules/assets/src/common/locales/es.json
@@ -299,5 +299,9 @@
     "assign": "Sección",
     "help": "Organiza los campos sin cambiar sus valores ni su obligatoriedad. Al eliminar una sección, sus campos pasan a «Sin sección».",
     "empty": "Esta sección aún no tiene campos."
+  },
+  "formLayout": {
+    "identity": "Identificación y asignación",
+    "template": "Datos de la plantilla"
   }
 }
diff --git a/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx b/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx
index e6db3c5..6929b1c 100644
--- a/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx
+++ b/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx
@@ -1,4 +1,4 @@
-import { FormActions, FormDialog } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { useTranslation } from "react-i18next";
 
@@ -22,11 +22,13 @@ export function EndRelationshipDialog(props: EndRelationshipDialogProps) {
       open
       title={t("endRelationship")}
     >
-      <p className="text-sm">
-        {relationship.values.name} · {sourceName} → {targetName}
-      </p>
-      <p className="text-sm text-muted-foreground">{t("endRelationshipConfirm")}</p>
-      <InventoryFeedback error={mutation.error} />
+      <FormBody>
+        <p className="text-sm">
+          {relationship.values.name} · {sourceName} → {targetName}
+        </p>
+        <p className="text-sm text-muted-foreground">{t("endRelationshipConfirm")}</p>
+        <InventoryFeedback error={mutation.error} />
+      </FormBody>
       <FormActions>
         <Button
           disabled={mutation.isPending}
diff --git a/modules/assets/src/web/asset-relationships/shared/ui/relationship-form.tsx b/modules/assets/src/web/asset-relationships/shared/ui/relationship-form.tsx
index 3ca2529..cde47c4 100644
--- a/modules/assets/src/web/asset-relationships/shared/ui/relationship-form.tsx
+++ b/modules/assets/src/web/asset-relationships/shared/ui/relationship-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Label } from "@repo/shadcn-ui/components/label";
@@ -34,51 +34,56 @@ export function RelationshipForm(props: RelationshipFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-type`}>{t("relationshipType")}</Label>
-          <SelectWithAction
-            action={{ label: t("newRelation"), onClick: () => setQuick(true) }}
-            disabled={mutation.isPending || catalog.isPending}
-            id={`${id}-type`}
-            label={t("relationshipType")}
-            onValueChange={setTypeId}
-            options={relationshipTypes.map((item) => ({ value: item.id, label: item.values.name }))}
-            placeholder={t("chooseRelation")}
-            required
-            value={typeId}
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-type`}>{t("relationshipType")}</Label>
+            <SelectWithAction
+              action={{ label: t("newRelation"), onClick: () => setQuick(true) }}
+              disabled={mutation.isPending || catalog.isPending}
+              id={`${id}-type`}
+              label={t("relationshipType")}
+              onValueChange={setTypeId}
+              options={relationshipTypes.map((item) => ({
+                value: item.id,
+                label: item.values.name,
+              }))}
+              placeholder={t("chooseRelation")}
+              required
+              value={typeId}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-target`}>{t("targetAsset")}</Label>
+            <SelectWithAction
+              disabled={mutation.isPending || inventory.isPending}
+              id={`${id}-target`}
+              label={t("targetAsset")}
+              onValueChange={setTargetId}
+              options={targetAssets.map((asset) => ({ value: asset.id, label: asset.values.name }))}
+              placeholder={t("chooseAsset")}
+              required
+              value={targetId}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-notes`}>{t("notes")}</Label>
+            <Textarea
+              id={`${id}-notes`}
+              maxLength={10000}
+              onChange={(event) => setNotes(event.target.value)}
+              value={notes}
+            />
+          </div>
+          <InventoryFeedback error={mutation.error ?? catalog.error ?? inventory.error} />
+          <ContextHelp
+            description={t("relationshipHelp")}
+            examples={t("relationshipExample")}
+            examplesLabel={t("examplesLabel")}
+            guidance={t("relationshipGuidance")}
+            title={t("helpTitle")}
           />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-target`}>{t("targetAsset")}</Label>
-          <SelectWithAction
-            disabled={mutation.isPending || inventory.isPending}
-            id={`${id}-target`}
-            label={t("targetAsset")}
-            onValueChange={setTargetId}
-            options={targetAssets.map((asset) => ({ value: asset.id, label: asset.values.name }))}
-            placeholder={t("chooseAsset")}
-            required
-            value={targetId}
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-notes`}>{t("notes")}</Label>
-          <Textarea
-            id={`${id}-notes`}
-            maxLength={10000}
-            onChange={(event) => setNotes(event.target.value)}
-            value={notes}
-          />
-        </div>
-        <InventoryFeedback error={mutation.error ?? catalog.error ?? inventory.error} />
-        <ContextHelp
-          description={t("relationshipHelp")}
-          examples={t("relationshipExample")}
-          examplesLabel={t("examplesLabel")}
-          guidance={t("relationshipGuidance")}
-          title={t("helpTitle")}
-        />
+        </FormBody>
         <FormActions>
           <Button disabled={!(typeId && targetId) || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/assets/shared/ui/asset-form.tsx b/modules/assets/src/web/assets/shared/ui/asset-form.tsx
index 2b74577..b6014d2 100644
--- a/modules/assets/src/web/assets/shared/ui/asset-form.tsx
+++ b/modules/assets/src/web/assets/shared/ui/asset-form.tsx
@@ -1,6 +1,7 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
 import { FieldSections } from "@repo/rdx-ui/components/field-sections";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
+import { FormSection } from "@repo/rdx-ui/components/form-section";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -43,160 +44,169 @@ export function AssetForm(props: AssetFormProps) {
   const selectProps = { disabled: mutation.isPending, placeholder: t("noAssignment") };
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-5" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
-            <Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-5" disabled={mutation.isPending}>
+            <FormSection title={t("formLayout.identity")}>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
+                <Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
+                  <SelectWithAction
+                    action={
+                      asset || !allowQuickCreate
+                        ? undefined
+                        : { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
+                    }
+                    disabled={!!asset || mutation.isPending}
+                    id={`${prefix}-template`}
+                    label={t("template")}
+                    onValueChange={selectTemplate}
+                    options={
+                      asset
+                        ? [
+                            {
+                              value: asset.values.templateId,
+                              label: asset.specification.templateName,
+                            },
+                          ]
+                        : templates.map((item) => ({ value: item.id, label: item.values.name }))
+                    }
+                    placeholder={t("chooseValue")}
+                    required
+                    value={values.templateId}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
+                  <SelectWithAction
+                    disabled={mutation.isPending}
+                    id={`${prefix}-status`}
+                    label={t("status")}
+                    onValueChange={changeStatus}
+                    options={AssetStatusSchema.options.map((value) => ({ value, label: t(value) }))}
+                    placeholder={t("chooseValue")}
+                    required
+                    value={values.status}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
+                  <SelectWithAction
+                    {...selectProps}
+                    action={
+                      allowQuickCreate
+                        ? {
+                            label: t("newSite"),
+                            onClick: () => lookups.onCreateSite(siteCreated),
+                          }
+                        : undefined
+                    }
+                    id={`${prefix}-site`}
+                    label={t("site")}
+                    onValueChange={(id) => form.setValue("siteId", id || null)}
+                    options={lookups.sites.map((site) => ({ value: site.id, label: site.name }))}
+                    value={values.siteId ?? ""}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`${prefix}-person`}>{t("person")}</Label>
+                  <SelectWithAction
+                    {...selectProps}
+                    action={
+                      allowQuickCreate
+                        ? {
+                            label: t("newPerson"),
+                            onClick: () => lookups.onCreatePerson(personCreated),
+                          }
+                        : undefined
+                    }
+                    id={`${prefix}-person`}
+                    label={t("person")}
+                    onValueChange={(id) => form.setValue("personId", id || null)}
+                    options={lookups.people
+                      .filter((person) => person.active || person.id === asset?.values.personId)
+                      .map((person) => ({
+                        value: person.id,
+                        label: person.name,
+                        disabled: !person.active && person.id !== values.personId,
+                      }))}
+                    value={values.personId ?? ""}
+                  />
+                </div>
+              </div>
+            </FormSection>
+            {fields.length > 0 && (
+              <section className="space-y-3">
+                <h3 className="font-medium">{t("characteristics")}</h3>
+                <FieldSections
+                  hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
+                  items={fields}
+                  renderItem={(field) =>
+                    field.fieldId === brandFieldId ? (
+                      <BrandSelect
+                        allowQuickCreate={allowQuickCreate}
+                        brandId={values.brandId ?? null}
+                        csrfToken={csrfToken}
+                        disabled={mutation.isPending}
+                        id={`${prefix}-${field.fieldId}`}
+                        key={field.fieldId}
+                        label={field.name}
+                        legacyName={
+                          typeof values.characteristics[field.fieldId] === "string"
+                            ? String(values.characteristics[field.fieldId])
+                            : ""
+                        }
+                        onChange={(brand) => {
+                          form.setValue("brandId", brand?.id ?? null, { shouldDirty: true });
+                          setCharacteristic(field.fieldId, brand?.name);
+                        }}
+                        required={field.required}
+                      />
+                    ) : (
+                      <AssetCharacteristicControl
+                        disabled={mutation.isPending}
+                        field={field}
+                        key={field.fieldId}
+                        onChange={(value) => setCharacteristic(field.fieldId, value)}
+                        prefix={prefix}
+                        value={values.characteristics[field.fieldId]}
+                      />
+                    )
+                  }
+                  sections={sections}
+                  ungroupedLabel={t("sections.ungrouped")}
+                />
+              </section>
+            )}
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
-              <SelectWithAction
-                action={
-                  asset || !allowQuickCreate
-                    ? undefined
-                    : { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
-                }
-                disabled={!!asset || mutation.isPending}
-                id={`${prefix}-template`}
-                label={t("template")}
-                onValueChange={selectTemplate}
-                options={
-                  asset
-                    ? [{ value: asset.values.templateId, label: asset.specification.templateName }]
-                    : templates.map((item) => ({ value: item.id, label: item.values.name }))
-                }
-                placeholder={t("chooseValue")}
-                required
-                value={values.templateId}
+              <Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={10000}
+                rows={3}
+                {...form.register("notes")}
               />
             </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
-              <SelectWithAction
-                disabled={mutation.isPending}
-                id={`${prefix}-status`}
-                label={t("status")}
-                onValueChange={changeStatus}
-                options={AssetStatusSchema.options.map((value) => ({ value, label: t(value) }))}
-                placeholder={t("chooseValue")}
-                required
-                value={values.status}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
-              <SelectWithAction
-                {...selectProps}
-                action={
-                  allowQuickCreate
-                    ? {
-                        label: t("newSite"),
-                        onClick: () => lookups.onCreateSite(siteCreated),
-                      }
-                    : undefined
-                }
-                id={`${prefix}-site`}
-                label={t("site")}
-                onValueChange={(id) => form.setValue("siteId", id || null)}
-                options={lookups.sites.map((site) => ({ value: site.id, label: site.name }))}
-                value={values.siteId ?? ""}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-person`}>{t("person")}</Label>
-              <SelectWithAction
-                {...selectProps}
-                action={
-                  allowQuickCreate
-                    ? {
-                        label: t("newPerson"),
-                        onClick: () => lookups.onCreatePerson(personCreated),
-                      }
-                    : undefined
-                }
-                id={`${prefix}-person`}
-                label={t("person")}
-                onValueChange={(id) => form.setValue("personId", id || null)}
-                options={lookups.people
-                  .filter((person) => person.active || person.id === asset?.values.personId)
-                  .map((person) => ({
-                    value: person.id,
-                    label: person.name,
-                    disabled: !person.active && person.id !== values.personId,
-                  }))}
-                value={values.personId ?? ""}
-              />
-            </div>
-          </div>
-          {fields.length > 0 && (
-            <section className="space-y-3">
-              <h3 className="font-medium">{t("characteristics")}</h3>
-              <FieldSections
-                hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
-                items={fields}
-                renderItem={(field) =>
-                  field.fieldId === brandFieldId ? (
-                    <BrandSelect
-                      allowQuickCreate={allowQuickCreate}
-                      brandId={values.brandId ?? null}
-                      csrfToken={csrfToken}
-                      disabled={mutation.isPending}
-                      id={`${prefix}-${field.fieldId}`}
-                      key={field.fieldId}
-                      label={field.name}
-                      legacyName={
-                        typeof values.characteristics[field.fieldId] === "string"
-                          ? String(values.characteristics[field.fieldId])
-                          : ""
-                      }
-                      onChange={(brand) => {
-                        form.setValue("brandId", brand?.id ?? null, { shouldDirty: true });
-                        setCharacteristic(field.fieldId, brand?.name);
-                      }}
-                      required={field.required}
-                    />
-                  ) : (
-                    <AssetCharacteristicControl
-                      disabled={mutation.isPending}
-                      field={field}
-                      key={field.fieldId}
-                      onChange={(value) => setCharacteristic(field.fieldId, value)}
-                      prefix={prefix}
-                      value={values.characteristics[field.fieldId]}
-                    />
-                  )
-                }
-                sections={sections}
-                ungroupedLabel={t("sections.ungrouped")}
-              />
-            </section>
+          </fieldset>
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("inventoryErrors.INVALID_REQUEST")}
+            </p>
           )}
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={10000}
-              rows={3}
-              {...form.register("notes")}
-            />
-          </div>
-        </fieldset>
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("inventoryErrors.INVALID_REQUEST")}
-          </p>
-        )}
-        <InventoryFeedback error={mutation.error} />
-        <ContextHelp
-          description={t("assetDescription")}
-          examples={t("assetExamples")}
-          examplesLabel={t("examplesLabel")}
-          guidance={t("assetGuidance")}
-          scopeNote={t("assetScope")}
-          title={t("helpTitle")}
-        />
+          <InventoryFeedback error={mutation.error} />
+          <ContextHelp
+            description={t("assetDescription")}
+            examples={t("assetExamples")}
+            examplesLabel={t("examplesLabel")}
+            guidance={t("assetGuidance")}
+            scopeNote={t("assetScope")}
+            title={t("helpTitle")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/brands/shared/ui/brand-form.tsx b/modules/assets/src/web/brands/shared/ui/brand-form.tsx
index d399832..6b83d45 100644
--- a/modules/assets/src/web/brands/shared/ui/brand-form.tsx
+++ b/modules/assets/src/web/brands/shared/ui/brand-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -29,54 +29,56 @@ export function BrandForm(props: BrandFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
-      <fieldset className="space-y-4" disabled={mutation.isPending || isReadingLogo}>
-        <div className="space-y-2">
-          <Label htmlFor={id}>{t("name")}</Label>
-          <Input
-            id={id}
-            maxLength={100}
-            readOnly={brand?.builtin}
-            required
-            {...form.register("name")}
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <fieldset className="space-y-4" disabled={mutation.isPending || isReadingLogo}>
+          <div className="space-y-2">
+            <Label htmlFor={id}>{t("name")}</Label>
+            <Input
+              id={id}
+              maxLength={100}
+              readOnly={brand?.builtin}
+              required
+              {...form.register("name")}
+            />
+          </div>
+          <BrandLogoField
+            error={logoError ?? form.formState.errors.logoSvg?.message}
+            logoSvg={logoSvg}
+            name={name}
+            onRemove={removeLogo}
+            onSelect={selectLogo}
           />
-        </div>
-        <BrandLogoField
-          error={logoError ?? form.formState.errors.logoSvg?.message}
-          logoSvg={logoSvg}
-          name={name}
-          onRemove={removeLogo}
-          onSelect={selectLogo}
-        />
-        {!quickCreate && (
-          <SwitchField
-            checked={form.watch("active")}
-            id={`${id}-active`}
-            label={t("brands.active")}
-            onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
-          />
-        )}
-      </fieldset>
-      {(mutation.error || form.formState.errors.name || form.formState.errors.active) && (
-        <p className="text-sm text-destructive" role="alert">
-          {t(
-            "brands.errors." +
-              (mutation.error instanceof BrandApiError
-                ? mutation.error.code
-                : mutation.error
-                  ? "INTERNAL_ERROR"
-                  : "INVALID_REQUEST")
+          {!quickCreate && (
+            <SwitchField
+              checked={form.watch("active")}
+              id={`${id}-active`}
+              label={t("brands.active")}
+              onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
+            />
           )}
-        </p>
-      )}
-      <ContextHelp
-        description={t("brands.help")}
-        examples={t("brands.examples")}
-        examplesLabel={t("examplesLabel")}
-        guidance={t("brands.guidance")}
-        scopeNote={t("globalHelp")}
-        title={t("helpTitle")}
-      />
+        </fieldset>
+        {(mutation.error || form.formState.errors.name || form.formState.errors.active) && (
+          <p className="text-sm text-destructive" role="alert">
+            {t(
+              "brands.errors." +
+                (mutation.error instanceof BrandApiError
+                  ? mutation.error.code
+                  : mutation.error
+                    ? "INTERNAL_ERROR"
+                    : "INVALID_REQUEST")
+            )}
+          </p>
+        )}
+        <ContextHelp
+          description={t("brands.help")}
+          examples={t("brands.examples")}
+          examplesLabel={t("examplesLabel")}
+          guidance={t("brands.guidance")}
+          scopeNote={t("globalHelp")}
+          title={t("helpTitle")}
+        />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending || isReadingLogo} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/catalog-fields/shared/ui/catalog-form.tsx b/modules/assets/src/web/catalog-fields/shared/ui/catalog-form.tsx
index dfc0114..96c45f4 100644
--- a/modules/assets/src/web/catalog-fields/shared/ui/catalog-form.tsx
+++ b/modules/assets/src/web/catalog-fields/shared/ui/catalog-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -19,54 +19,56 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-        <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-type`}>{t("type")}</Label>
-        <SelectWithAction
-          disabled={!!item || mutation.isPending}
-          id={`${id}-type`}
-          label={t("type")}
-          onValueChange={(value) => {
-            const parsed = FieldTypeSchema.safeParse(value);
-            if (parsed.success) {
-              form.setValue("type", parsed.data);
-            }
-          }}
-          options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
-          placeholder={t("chooseType")}
-          required
-          value={type}
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
-        <Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
-      </div>
-      {type === "choice" && (
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
         <div className="space-y-2">
-          <Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
-          <Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
-          <p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
+          <Label htmlFor={`${id}-name`}>{t("name")}</Label>
+          <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
         </div>
-      )}
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-description`}>{t("description")}</Label>
-        <Textarea
-          id={`${id}-description`}
-          maxLength={1000}
-          rows={3}
-          {...form.register("description")}
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-type`}>{t("type")}</Label>
+          <SelectWithAction
+            disabled={!!item || mutation.isPending}
+            id={`${id}-type`}
+            label={t("type")}
+            onValueChange={(value) => {
+              const parsed = FieldTypeSchema.safeParse(value);
+              if (parsed.success) {
+                form.setValue("type", parsed.data);
+              }
+            }}
+            options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
+            placeholder={t("chooseType")}
+            required
+            value={type}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
+          <Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
+        </div>
+        {type === "choice" && (
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
+            <Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
+            <p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
+          </div>
+        )}
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-description`}>{t("description")}</Label>
+          <Textarea
+            id={`${id}-description`}
+            maxLength={1000}
+            rows={3}
+            {...form.register("description")}
+          />
+        </div>
+        <CatalogError
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
         />
-      </div>
-      <CatalogError
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <CatalogHelp kind="field" scope={scope} />
+        <CatalogHelp kind="field" scope={scope} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/catalog-relations/shared/ui/catalog-relation-form.tsx b/modules/assets/src/web/catalog-relations/shared/ui/catalog-relation-form.tsx
index a5a4650..eed6e83 100644
--- a/modules/assets/src/web/catalog-relations/shared/ui/catalog-relation-form.tsx
+++ b/modules/assets/src/web/catalog-relations/shared/ui/catalog-relation-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -18,49 +18,56 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      <div className="space-y-2">
-        <Label htmlFor={id}>{t("name")}</Label>
-        <Input
-          id={id}
-          maxLength={100}
-          required
-          {...form.register("name")}
-          onChange={(event) => {
-            form.setValue("name", event.target.value);
-            if (symmetric) {
-              form.setValue("inverseName", event.target.value);
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <div className="space-y-2">
+          <Label htmlFor={id}>{t("name")}</Label>
+          <Input
+            id={id}
+            maxLength={100}
+            required
+            {...form.register("name")}
+            onChange={(event) => {
+              form.setValue("name", event.target.value);
+              if (symmetric) {
+                form.setValue("inverseName", event.target.value);
+              }
+            }}
+          />
+        </div>
+        <SwitchField
+          checked={symmetric}
+          disabled={!!item}
+          id={`${id}-symmetric`}
+          label={t("symmetric")}
+          onCheckedChange={(isSymmetric) => {
+            form.setValue("symmetric", isSymmetric);
+            if (isSymmetric) {
+              form.setValue("inverseName", form.getValues("name"));
             }
           }}
         />
-      </div>
-      <SwitchField
-        checked={symmetric}
-        disabled={!!item}
-        id={`${id}-symmetric`}
-        label={t("symmetric")}
-        onCheckedChange={(isSymmetric) => {
-          form.setValue("symmetric", isSymmetric);
-          if (isSymmetric) {
-            form.setValue("inverseName", form.getValues("name"));
-          }
-        }}
-      />
-      {!symmetric && (
+        {!symmetric && (
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-inverse`}>{t("inverseName")}</Label>
+            <Input
+              id={`${id}-inverse`}
+              maxLength={100}
+              required
+              {...form.register("inverseName")}
+            />
+          </div>
+        )}
         <div className="space-y-2">
-          <Label htmlFor={`${id}-inverse`}>{t("inverseName")}</Label>
-          <Input id={`${id}-inverse`} maxLength={100} required {...form.register("inverseName")} />
+          <Label htmlFor={`${id}-description`}>{t("description")}</Label>
+          <Textarea id={`${id}-description`} maxLength={1000} {...form.register("description")} />
         </div>
-      )}
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-description`}>{t("description")}</Label>
-        <Textarea id={`${id}-description`} maxLength={1000} {...form.register("description")} />
-      </div>
-      <CatalogError
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <CatalogHelp kind="relation" scope={scope} />
+        <CatalogError
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
+        />
+        <CatalogHelp kind="relation" scope={scope} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/catalog-templates/shared/ui/catalog-template-form.tsx b/modules/assets/src/web/catalog-templates/shared/ui/catalog-template-form.tsx
index 6a8d476..14f8ab7 100644
--- a/modules/assets/src/web/catalog-templates/shared/ui/catalog-template-form.tsx
+++ b/modules/assets/src/web/catalog-templates/shared/ui/catalog-template-form.tsx
@@ -1,5 +1,6 @@
 import { UniqueID } from "@repo/rdx-ddd";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
+import { FormSection } from "@repo/rdx-ui/components/form-section";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { TemplateSectionsEditor } from "@repo/rdx-ui/components/template-sections-editor";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -23,86 +24,90 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
-        <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <FormSection title={t("formLayout.template")}>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${id}-name`}>{t("name")}</Label>
+                <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${id}-description`}>{t("description")}</Label>
+                <Textarea
+                  id={`${id}-description`}
+                  maxLength={1000}
+                  rows={2}
+                  {...form.register("description")}
+                />
+              </div>
+            </div>
+          </FormSection>
           <div className="space-y-2">
-            <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-            <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${id}-description`}>{t("description")}</Label>
-            <Textarea
-              id={`${id}-description`}
-              maxLength={1000}
-              rows={2}
-              {...form.register("description")}
+            <Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
+            <SelectWithAction
+              action={
+                allowQuickCreate
+                  ? { label: t("addField"), onClick: () => setCreatingField(true) }
+                  : undefined
+              }
+              disabled={mutation.isPending}
+              id={`${id}-field`}
+              label={t("selectField")}
+              onValueChange={add}
+              options={fields
+                .filter(
+                  (entry) =>
+                    entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
+                )
+                .map((entry) => ({ value: entry.id, label: entry.values.name }))}
+              placeholder={t("choose")}
+              value=""
             />
           </div>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
-          <SelectWithAction
-            action={
-              allowQuickCreate
-                ? { label: t("addField"), onClick: () => setCreatingField(true) }
-                : undefined
-            }
+          {!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
+          <TemplateSectionsEditor
+            createId={() => UniqueID.generateNewID().toPrimitive()}
             disabled={mutation.isPending}
-            id={`${id}-field`}
-            label={t("selectField")}
-            onValueChange={add}
-            options={fields
-              .filter(
-                (entry) =>
-                  entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
-              )
-              .map((entry) => ({ value: entry.id, label: entry.values.name }))}
-            placeholder={t("choose")}
-            value=""
+            fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
+            fieldNotes={Object.fromEntries(
+              fields
+                .filter((field) => !field.effectiveActive)
+                .map((field) => [field.id, t("disabledField")])
+            )}
+            fields={selected}
+            labels={{
+              title: t("sections.title"),
+              add: t("sections.add"),
+              name: t("sections.name"),
+              description: t("sections.description"),
+              ungrouped: t("sections.ungrouped"),
+              moveUp: t("sections.moveUp"),
+              moveDown: t("sections.moveDown"),
+              remove: t("sections.remove"),
+              removeField: t("sections.removeField"),
+              required: t("sections.required"),
+              assign: t("sections.assign"),
+              help: t("sections.help"),
+              empty: t("sections.empty"),
+            }}
+            onChange={({ sections, fields: next }) => {
+              form.setValue("sections", sections, { shouldDirty: true });
+              form.setValue("fields", next, { shouldDirty: true });
+            }}
+            sections={form.watch("sections") ?? []}
           />
-        </div>
-        {!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
-        <TemplateSectionsEditor
-          createId={() => UniqueID.generateNewID().toPrimitive()}
-          disabled={mutation.isPending}
-          fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
-          fieldNotes={Object.fromEntries(
-            fields
-              .filter((field) => !field.effectiveActive)
-              .map((field) => [field.id, t("disabledField")])
+          {form.formState.errors.sections && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("errors.INVALID_SECTIONS")}
+            </p>
           )}
-          fields={selected}
-          labels={{
-            title: t("sections.title"),
-            add: t("sections.add"),
-            name: t("sections.name"),
-            description: t("sections.description"),
-            ungrouped: t("sections.ungrouped"),
-            moveUp: t("sections.moveUp"),
-            moveDown: t("sections.moveDown"),
-            remove: t("sections.remove"),
-            removeField: t("sections.removeField"),
-            required: t("sections.required"),
-            assign: t("sections.assign"),
-            help: t("sections.help"),
-            empty: t("sections.empty"),
-          }}
-          onChange={({ sections, fields: next }) => {
-            form.setValue("sections", sections, { shouldDirty: true });
-            form.setValue("fields", next, { shouldDirty: true });
-          }}
-          sections={form.watch("sections") ?? []}
-        />
-        {form.formState.errors.sections && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("errors.INVALID_SECTIONS")}
-          </p>
-        )}
-        <CatalogError
-          error={mutation.error}
-          invalid={Object.keys(form.formState.errors).length > 0}
-        />
-        <CatalogHelp kind="template" scope={scope} />
+          <CatalogError
+            error={mutation.error}
+            invalid={Object.keys(form.formState.errors).length > 0}
+          />
+          <CatalogHelp kind="template" scope={scope} />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/support-connections/shared/ui/support-form.tsx b/modules/assets/src/web/support-connections/shared/ui/support-form.tsx
index 143cd27..255ab9a 100644
--- a/modules/assets/src/web/support-connections/shared/ui/support-form.tsx
+++ b/modules/assets/src/web/support-connections/shared/ui/support-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -21,75 +21,81 @@ export function SupportForm(props: SupportFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={prefix}>{t("support.tool")}</Label>
-            <SelectWithAction
-              action={{ label: t("support.newTool"), onClick: () => setQuick(true) }}
-              id={prefix}
-              label={t("support.tool")}
-              onValueChange={(id) => form.setValue("toolId", id)}
-              options={tools
-                .filter((item) => item.active || item.id === connection?.values.toolId)
-                .map((item) => ({ value: item.id, label: item.name }))}
-              placeholder={t("support.choose")}
-              value={values.toolId}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-destination`}>{t("support.destination")}</Label>
-            <Input id={`${prefix}-destination`} maxLength={300} {...form.register("destination")} />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-state`}>{t("support.state")}</Label>
-            <SelectWithAction
-              id={`${prefix}-state`}
-              label={t("support.state")}
-              onValueChange={(state) => {
-                if (state === "pending" || state === "available" || state === "retired") {
-                  form.setValue("state", state);
-                  if (state !== "available") {
-                    form.setValue("preferred", false);
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <div className="space-y-2">
+              <Label htmlFor={prefix}>{t("support.tool")}</Label>
+              <SelectWithAction
+                action={{ label: t("support.newTool"), onClick: () => setQuick(true) }}
+                id={prefix}
+                label={t("support.tool")}
+                onValueChange={(id) => form.setValue("toolId", id)}
+                options={tools
+                  .filter((item) => item.active || item.id === connection?.values.toolId)
+                  .map((item) => ({ value: item.id, label: item.name }))}
+                placeholder={t("support.choose")}
+                value={values.toolId}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-destination`}>{t("support.destination")}</Label>
+              <Input
+                id={`${prefix}-destination`}
+                maxLength={300}
+                {...form.register("destination")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-state`}>{t("support.state")}</Label>
+              <SelectWithAction
+                id={`${prefix}-state`}
+                label={t("support.state")}
+                onValueChange={(state) => {
+                  if (state === "pending" || state === "available" || state === "retired") {
+                    form.setValue("state", state);
+                    if (state !== "available") {
+                      form.setValue("preferred", false);
+                    }
                   }
-                }
-              }}
-              options={["pending", "available", "retired"].map((state) => ({
-                value: state,
-                label: t(`support.${state}`),
-              }))}
-              placeholder={t("support.chooseState")}
-              value={values.state}
+                }}
+                options={["pending", "available", "retired"].map((state) => ({
+                  value: state,
+                  label: t(`support.${state}`),
+                }))}
+                placeholder={t("support.chooseState")}
+                value={values.state}
+              />
+            </div>
+            <SwitchField
+              checked={values.requiresVpn}
+              id={`${prefix}-requires-vpn`}
+              label={t("support.requiresVpn")}
+              onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
             />
-          </div>
-          <SwitchField
-            checked={values.requiresVpn}
-            id={`${prefix}-requires-vpn`}
-            label={t("support.requiresVpn")}
-            onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
-          />
-          <SwitchField
-            checked={values.preferred}
-            disabled={values.state !== "available"}
-            id={`${prefix}-preferred`}
-            label={t("support.preferred")}
-            onCheckedChange={(preferred) => form.setValue("preferred", preferred)}
-          />
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("support.notes")}</Label>
-            <textarea
-              className="min-h-24 w-full rounded-md border bg-background px-3 py-2 text-sm"
-              id={`${prefix}-notes`}
-              maxLength={2000}
-              {...form.register("notes")}
+            <SwitchField
+              checked={values.preferred}
+              disabled={values.state !== "available"}
+              id={`${prefix}-preferred`}
+              label={t("support.preferred")}
+              onCheckedChange={(preferred) => form.setValue("preferred", preferred)}
             />
-          </div>
-        </fieldset>
-        <SupportFeedback
-          error={mutation.error}
-          invalid={Object.keys(form.formState.errors).length > 0}
-        />
-        <SupportHelp />
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("support.notes")}</Label>
+              <textarea
+                className="min-h-24 w-full rounded-md border bg-background px-3 py-2 text-sm"
+                id={`${prefix}-notes`}
+                maxLength={2000}
+                {...form.register("notes")}
+              />
+            </div>
+          </fieldset>
+          <SupportFeedback
+            error={mutation.error}
+            invalid={Object.keys(form.formState.errors).length > 0}
+          />
+          <SupportHelp />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/support-tools/shared/ui/support-tool-form.tsx b/modules/assets/src/web/support-tools/shared/ui/support-tool-form.tsx
index e72437c..e63e18b 100644
--- a/modules/assets/src/web/support-tools/shared/ui/support-tool-form.tsx
+++ b/modules/assets/src/web/support-tools/shared/ui/support-tool-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -17,30 +17,32 @@ export function SupportToolForm(props: SupportToolFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
-      <fieldset className="space-y-4" disabled={mutation.isPending}>
-        <div className="space-y-2">
-          <Label htmlFor={id}>{t("support.toolName")}</Label>
-          <Input
-            id={id}
-            maxLength={100}
-            readOnly={tool?.builtin}
-            required
-            {...form.register("name")}
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <fieldset className="space-y-4" disabled={mutation.isPending}>
+          <div className="space-y-2">
+            <Label htmlFor={id}>{t("support.toolName")}</Label>
+            <Input
+              id={id}
+              maxLength={100}
+              readOnly={tool?.builtin}
+              required
+              {...form.register("name")}
+            />
+          </div>
+          <SwitchField
+            checked={form.watch("active")}
+            id={`${id}-active`}
+            label={t("support.active")}
+            onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
           />
-        </div>
-        <SwitchField
-          checked={form.watch("active")}
-          id={`${id}-active`}
-          label={t("support.active")}
-          onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
+        </fieldset>
+        <SupportFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
         />
-      </fieldset>
-      <SupportFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <SupportHelp tool />
+        <SupportHelp tool />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/assets/src/web/workstations/shared/ui/workstation-form.tsx b/modules/assets/src/web/workstations/shared/ui/workstation-form.tsx
index ddcc76d..37a9a21 100644
--- a/modules/assets/src/web/workstations/shared/ui/workstation-form.tsx
+++ b/modules/assets/src/web/workstations/shared/ui/workstation-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -36,143 +36,145 @@ export function WorkstationForm(props: WorkstationFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={prefix}>{t("name")}</Label>
-            <Input id={prefix} maxLength={100} required {...form.register("name")} />
-          </div>
-          <SwitchField
-            checked={values.active}
-            id={`${prefix}-active`}
-            label={t("active")}
-            onCheckedChange={(active) => form.setValue("active", active)}
-          />
-          <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
-              <SelectWithAction
-                action={{
-                  label: t("newSite"),
-                  onClick: () => lookups.onCreateSite(siteCreated),
-                }}
-                id={`${prefix}-site`}
-                label={t("site")}
-                onValueChange={(id) => form.setValue("siteId", id || null)}
-                options={lookups.sites.map((item) => ({ value: item.id, label: item.name }))}
-                placeholder={t("noAssignment")}
-                value={values.siteId ?? ""}
-              />
+              <Label htmlFor={prefix}>{t("name")}</Label>
+              <Input id={prefix} maxLength={100} required {...form.register("name")} />
             </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-person`}>{t("workstationPerson")}</Label>
-              <SelectWithAction
-                action={{
-                  label: t("newPerson"),
-                  onClick: () => lookups.onCreatePerson(personCreated),
-                }}
-                id={`${prefix}-person`}
-                label={t("workstationPerson")}
-                onValueChange={(id) => form.setValue("personId", id || null)}
-                options={lookups.people
-                  .filter((item) => item.active || item.id === workstation?.values.personId)
-                  .map((item) => ({ value: item.id, label: item.name }))}
-                placeholder={t("noAssignment")}
-                value={values.personId ?? ""}
-              />
+            <SwitchField
+              checked={values.active}
+              id={`${prefix}-active`}
+              label={t("active")}
+              onCheckedChange={(active) => form.setValue("active", active)}
+            />
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
+                <SelectWithAction
+                  action={{
+                    label: t("newSite"),
+                    onClick: () => lookups.onCreateSite(siteCreated),
+                  }}
+                  id={`${prefix}-site`}
+                  label={t("site")}
+                  onValueChange={(id) => form.setValue("siteId", id || null)}
+                  options={lookups.sites.map((item) => ({ value: item.id, label: item.name }))}
+                  placeholder={t("noAssignment")}
+                  value={values.siteId ?? ""}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-person`}>{t("workstationPerson")}</Label>
+                <SelectWithAction
+                  action={{
+                    label: t("newPerson"),
+                    onClick: () => lookups.onCreatePerson(personCreated),
+                  }}
+                  id={`${prefix}-person`}
+                  label={t("workstationPerson")}
+                  onValueChange={(id) => form.setValue("personId", id || null)}
+                  options={lookups.people
+                    .filter((item) => item.active || item.id === workstation?.values.personId)
+                    .map((item) => ({ value: item.id, label: item.name }))}
+                  placeholder={t("noAssignment")}
+                  value={values.personId ?? ""}
+                />
+              </div>
             </div>
-          </div>
 
-          {(["assetIds", "sharedAssetIds"] as const).map((field) => (
-            <div className="space-y-2" key={field}>
-              <Label htmlFor={`${prefix}-${field}`}>
-                {t(field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset")}
-              </Label>
-              <SelectWithAction
-                action={{
-                  label: t("newAsset"),
-                  onClick: () => {
-                    setQuickField(field);
-                    setQuick(true);
-                  },
-                  disabled: !catalog.data,
-                }}
-                disabled={inventory.isPending || values[field].length >= 200}
-                id={`${prefix}-${field}`}
-                label={t(
-                  field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset"
-                )}
-                onValueChange={(id) => add(field, id)}
-                options={assets
-                  .filter(
-                    (item) => ![...values.assetIds, ...values.sharedAssetIds].includes(item.id)
-                  )
-                  .map((item) => ({
-                    value: item.id,
-                    label: unavailable(field, item.id)
-                      ? t("workstationOccupied", { name: item.values.name })
-                      : item.values.name,
-                    disabled: unavailable(field, item.id),
-                  }))}
-                placeholder={t("chooseAsset")}
-                value=""
-              />
-              {values[field].length ? (
-                <ul className="space-y-2">
-                  {values[field].map((id) => (
-                    <li
-                      className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
-                      key={id}
-                    >
-                      <div>
-                        <p>{assets.find((item) => item.id === id)?.values.name ?? id}</p>
-                        {unavailable(field, id) && (
-                          <p className="text-destructive">
-                            {t("inventoryErrors.ASSET_IN_WORKSTATION")}
-                          </p>
-                        )}
-                      </div>
-                      <Button
-                        aria-label={t("removeWorkstationAsset", {
-                          name: assets.find((item) => item.id === id)?.values.name ?? id,
-                        })}
-                        onClick={() =>
-                          form.setValue(
-                            field,
-                            values[field].filter((item) => item !== id)
-                          )
-                        }
-                        size="sm"
-                        type="button"
-                        variant="outline"
+            {(["assetIds", "sharedAssetIds"] as const).map((field) => (
+              <div className="space-y-2" key={field}>
+                <Label htmlFor={`${prefix}-${field}`}>
+                  {t(field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset")}
+                </Label>
+                <SelectWithAction
+                  action={{
+                    label: t("newAsset"),
+                    onClick: () => {
+                      setQuickField(field);
+                      setQuick(true);
+                    },
+                    disabled: !catalog.data,
+                  }}
+                  disabled={inventory.isPending || values[field].length >= 200}
+                  id={`${prefix}-${field}`}
+                  label={t(
+                    field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset"
+                  )}
+                  onValueChange={(id) => add(field, id)}
+                  options={assets
+                    .filter(
+                      (item) => ![...values.assetIds, ...values.sharedAssetIds].includes(item.id)
+                    )
+                    .map((item) => ({
+                      value: item.id,
+                      label: unavailable(field, item.id)
+                        ? t("workstationOccupied", { name: item.values.name })
+                        : item.values.name,
+                      disabled: unavailable(field, item.id),
+                    }))}
+                  placeholder={t("chooseAsset")}
+                  value=""
+                />
+                {values[field].length ? (
+                  <ul className="space-y-2">
+                    {values[field].map((id) => (
+                      <li
+                        className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
+                        key={id}
                       >
-                        ×
-                      </Button>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  {t(field === "assetIds" ? "noWorkstationAssets" : "noSharedWorkstationAssets")}
-                </p>
-              )}
-            </div>
-          ))}
-        </fieldset>
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("inventoryErrors.INVALID_REQUEST")}
-          </p>
-        )}
-        <InventoryFeedback error={mutation.error ?? inventory.error} />
-        <ContextHelp
-          description={t("workstationDescription")}
-          examples={t("workstationExamples")}
-          examplesLabel={t("examplesLabel")}
-          guidance={t("workstationGuidance")}
-          scopeNote={t("workstationScope")}
-          title={t("helpTitle")}
-        />
+                        <div>
+                          <p>{assets.find((item) => item.id === id)?.values.name ?? id}</p>
+                          {unavailable(field, id) && (
+                            <p className="text-destructive">
+                              {t("inventoryErrors.ASSET_IN_WORKSTATION")}
+                            </p>
+                          )}
+                        </div>
+                        <Button
+                          aria-label={t("removeWorkstationAsset", {
+                            name: assets.find((item) => item.id === id)?.values.name ?? id,
+                          })}
+                          onClick={() =>
+                            form.setValue(
+                              field,
+                              values[field].filter((item) => item !== id)
+                            )
+                          }
+                          size="sm"
+                          type="button"
+                          variant="outline"
+                        >
+                          ×
+                        </Button>
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    {t(field === "assetIds" ? "noWorkstationAssets" : "noSharedWorkstationAssets")}
+                  </p>
+                )}
+              </div>
+            ))}
+          </fieldset>
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("inventoryErrors.INVALID_REQUEST")}
+            </p>
+          )}
+          <InventoryFeedback error={mutation.error ?? inventory.error} />
+          <ContextHelp
+            description={t("workstationDescription")}
+            examples={t("workstationExamples")}
+            examplesLabel={t("examplesLabel")}
+            guidance={t("workstationGuidance")}
+            scopeNote={t("workstationScope")}
+            title={t("helpTitle")}
+          />
+        </FormBody>
         <FormActions>
           <Button
             disabled={
diff --git a/modules/companies/src/web/access/create/ui/quick-create-dialog.tsx b/modules/companies/src/web/access/create/ui/quick-create-dialog.tsx
index 733b99c..1cfff6b 100644
--- a/modules/companies/src/web/access/create/ui/quick-create-dialog.tsx
+++ b/modules/companies/src/web/access/create/ui/quick-create-dialog.tsx
@@ -1,4 +1,4 @@
-import { FormActions, FormDialog } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
 import { Label } from "@repo/shadcn-ui/components/label";
@@ -23,48 +23,50 @@ export function QuickCreateDialog(props: QuickCreateDialogProps) {
       open
       title={t(target.kind === "system" ? "quickAddSystem" : "quickAddEnvironment")}
     >
-      <form className="space-y-4" onSubmit={submit}>
-        {target.kind === "environment" && (
-          <p className="text-sm text-muted-foreground">
-            {t("quickEnvironmentContext", { name: target.systemName })}
-          </p>
-        )}
-        <div className="space-y-2">
-          <Label htmlFor={id}>{t("name")}</Label>
-          <Input
-            id={id}
-            maxLength={100}
-            required
-            {...form.register("name", { validate: (value) => value.trim().length > 0 })}
-          />
-          {form.formState.errors.name && (
-            <p className="text-destructive" role="alert">
-              {t("invalid")}
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          {target.kind === "environment" && (
+            <p className="text-sm text-muted-foreground">
+              {t("quickEnvironmentContext", { name: target.systemName })}
             </p>
           )}
-        </div>
-        {mutation.isError && (
-          <p className="text-destructive" role="alert">
-            {t(
-              `errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
-            )}
-          </p>
-        )}
-        {existing && (
           <div className="space-y-2">
-            <p>{t("quickExisting")}</p>
-            <Button
-              disabled={mutation.isPending}
-              onClick={() => onCreated(existing.id)}
-              type="button"
-              variant="outline"
-            >
-              {t("quickUseExisting")}
-            </Button>
+            <Label htmlFor={id}>{t("name")}</Label>
+            <Input
+              id={id}
+              maxLength={100}
+              required
+              {...form.register("name", { validate: (value) => value.trim().length > 0 })}
+            />
+            {form.formState.errors.name && (
+              <p className="text-destructive" role="alert">
+                {t("invalid")}
+              </p>
+            )}
           </div>
-        )}
-        <p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
-        <EntityHelp kind={target.kind} scope={scope} />
+          {mutation.isError && (
+            <p className="text-destructive" role="alert">
+              {t(
+                `errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
+              )}
+            </p>
+          )}
+          {existing && (
+            <div className="space-y-2">
+              <p>{t("quickExisting")}</p>
+              <Button
+                disabled={mutation.isPending}
+                onClick={() => onCreated(existing.id)}
+                type="button"
+                variant="outline"
+              >
+                {t("quickUseExisting")}
+              </Button>
+            </div>
+          )}
+          <p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
+          <EntityHelp kind={target.kind} scope={scope} />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "quickSaveSelect")}
diff --git a/modules/companies/src/web/access/shared/ui/access-form-fields.tsx b/modules/companies/src/web/access/shared/ui/access-form-fields.tsx
index d43b66c..ea4e860 100644
--- a/modules/companies/src/web/access/shared/ui/access-form-fields.tsx
+++ b/modules/companies/src/web/access/shared/ui/access-form-fields.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { Button } from "@repo/shadcn-ui/components/button";
 import type { ComponentType } from "react";
 import { useId } from "react";
@@ -37,52 +37,54 @@ export function AccessFormFields(
   const prefix = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
-        <div className="grid gap-4 sm:grid-cols-2">
-          {editableFields.map((field) => (
-            <div
-              className={["note", "permissions"].includes(field.type) ? "sm:col-span-2" : ""}
-              key={field.key}
-            >
-              <AccessFieldControl
-                createLabel={
-                  field.key === "systemId" || field.key === "environmentId"
-                    ? undefined
-                    : t("quickAddEntry", { name: t(field.key) })
-                }
-                disabled={
-                  Boolean(item && field.fixed) ||
-                  lockedFields.includes(field.key) ||
-                  mutation.isPending
-                }
-                field={field}
-                form={form}
-                id={`${prefix}-${field.key}`}
-                onCreate={quickAction(field)}
-                onSelected={(value) => select(field, value)}
-                options={options(field)}
-                value={watched[field.key]}
-              />
-            </div>
-          ))}
-        </div>
-        {validation && (
-          <p className="text-destructive" role="alert">
-            {validation}
-          </p>
-        )}
-        {mutation.isError && (
-          <p className="text-destructive" role="alert">
-            {t(
-              `errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
-            )}
-          </p>
-        )}
-        {help[kind] && <p className="text-sm text-muted-foreground">{t(help[kind])}</p>}
-        {["account_person", "membership", "grant"].includes(kind) && (
-          <p className="text-sm text-muted-foreground">{t("configurationHelp")}</p>
-        )}
-        <EntityHelp kind={kind} scope={scope} />
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {editableFields.map((field) => (
+              <div
+                className={["note", "permissions"].includes(field.type) ? "sm:col-span-2" : ""}
+                key={field.key}
+              >
+                <AccessFieldControl
+                  createLabel={
+                    field.key === "systemId" || field.key === "environmentId"
+                      ? undefined
+                      : t("quickAddEntry", { name: t(field.key) })
+                  }
+                  disabled={
+                    Boolean(item && field.fixed) ||
+                    lockedFields.includes(field.key) ||
+                    mutation.isPending
+                  }
+                  field={field}
+                  form={form}
+                  id={`${prefix}-${field.key}`}
+                  onCreate={quickAction(field)}
+                  onSelected={(value) => select(field, value)}
+                  options={options(field)}
+                  value={watched[field.key]}
+                />
+              </div>
+            ))}
+          </div>
+          {validation && (
+            <p className="text-destructive" role="alert">
+              {validation}
+            </p>
+          )}
+          {mutation.isError && (
+            <p className="text-destructive" role="alert">
+              {t(
+                `errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
+              )}
+            </p>
+          )}
+          {help[kind] && <p className="text-sm text-muted-foreground">{t(help[kind])}</p>}
+          {["account_person", "membership", "grant"].includes(kind) && (
+            <p className="text-sm text-muted-foreground">{t("configurationHelp")}</p>
+          )}
+          <EntityHelp kind={kind} scope={scope} />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/application-configurations/shared/ui/application-configuration-form.tsx b/modules/companies/src/web/application-configurations/shared/ui/application-configuration-form.tsx
index e4e9622..e5ae21d 100644
--- a/modules/companies/src/web/application-configurations/shared/ui/application-configuration-form.tsx
+++ b/modules/companies/src/web/application-configurations/shared/ui/application-configuration-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -45,121 +45,123 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
+                <SelectWithAction
+                  action={
+                    fixed
+                      ? undefined
+                      : { label: t("profiles.new"), onClick: () => setQuick("profile") }
+                  }
+                  disabled={fixed || !ready}
+                  id={`${prefix}-profile`}
+                  label={t("mail.profile")}
+                  onValueChange={(id) => form.setValue("profileId", id)}
+                  options={applicationProfiles(values.profileId, profiles.data?.profiles)}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.profileId}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-resource`}>{t("applications.resource")}</Label>
+                <SelectWithAction
+                  action={
+                    configuration
+                      ? undefined
+                      : {
+                          label: t("applications.newResource"),
+                          onClick: () => setQuick("application"),
+                        }
+                  }
+                  disabled={!!configuration || !ready}
+                  id={`${prefix}-resource`}
+                  label={t("applications.resource")}
+                  onValueChange={(id) => form.setValue("resourceId", id)}
+                  options={applicationOptions(
+                    values.resourceId,
+                    resources.data?.resources,
+                    catalog.data?.items
+                  )}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.resourceId}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-delivery`}>{t("applications.delivery")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-delivery`}
+                  label={t("applications.delivery")}
+                  onValueChange={changeDelivery}
+                  options={["installed", "web"].map((value) => ({
+                    value,
+                    label: t(`applications.${value}`),
+                  }))}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.delivery}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-state`}
+                  label={t("mail.state")}
+                  onValueChange={changeState}
+                  options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.state}
+                />
+              </div>
+            </div>
+            {values.delivery === "installed" && (
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-version`}>{t("applications.version")}</Label>
+                <Input
+                  id={`${prefix}-version`}
+                  maxLength={100}
+                  onChange={(event) => form.setValue("version", event.target.value || null)}
+                  value={values.version ?? ""}
+                />
+              </div>
+            )}
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
-              <SelectWithAction
-                action={
-                  fixed
-                    ? undefined
-                    : { label: t("profiles.new"), onClick: () => setQuick("profile") }
-                }
-                disabled={fixed || !ready}
-                id={`${prefix}-profile`}
-                label={t("mail.profile")}
-                onValueChange={(id) => form.setValue("profileId", id)}
-                options={applicationProfiles(values.profileId, profiles.data?.profiles)}
-                placeholder={t("mail.choose")}
-                required
-                value={values.profileId}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-resource`}>{t("applications.resource")}</Label>
-              <SelectWithAction
-                action={
-                  configuration
-                    ? undefined
-                    : {
-                        label: t("applications.newResource"),
-                        onClick: () => setQuick("application"),
-                      }
-                }
-                disabled={!!configuration || !ready}
-                id={`${prefix}-resource`}
-                label={t("applications.resource")}
-                onValueChange={(id) => form.setValue("resourceId", id)}
-                options={applicationOptions(
-                  values.resourceId,
-                  resources.data?.resources,
-                  catalog.data?.items
-                )}
-                placeholder={t("mail.choose")}
-                required
-                value={values.resourceId}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-delivery`}>{t("applications.delivery")}</Label>
-              <SelectWithAction
-                id={`${prefix}-delivery`}
-                label={t("applications.delivery")}
-                onValueChange={changeDelivery}
-                options={["installed", "web"].map((value) => ({
-                  value,
-                  label: t(`applications.${value}`),
-                }))}
-                placeholder={t("mail.choose")}
-                required
-                value={values.delivery}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
-              <SelectWithAction
-                id={`${prefix}-state`}
-                label={t("mail.state")}
-                onValueChange={changeState}
-                options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
-                placeholder={t("mail.choose")}
-                required
-                value={values.state}
-              />
-            </div>
-          </div>
-          {values.delivery === "installed" && (
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-version`}>{t("applications.version")}</Label>
-              <Input
-                id={`${prefix}-version`}
-                maxLength={100}
-                onChange={(event) => form.setValue("version", event.target.value || null)}
-                value={values.version ?? ""}
+              <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                onChange={(event) => form.setValue("notes", event.target.value || null)}
+                rows={3}
+                value={values.notes ?? ""}
               />
             </div>
+          </fieldset>
+          {configuration && (
+            <p className="text-sm text-muted-foreground">{t("applications.fixed")}</p>
           )}
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              onChange={(event) => form.setValue("notes", event.target.value || null)}
-              rows={3}
-              value={values.notes ?? ""}
-            />
-          </div>
-        </fieldset>
-        {configuration && (
-          <p className="text-sm text-muted-foreground">{t("applications.fixed")}</p>
-        )}
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("applications.errors.INVALID_REQUEST")}
-          </p>
-        )}
-        <ApplicationFeedback
-          error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
-        />
-        <ContextHelp
-          description={t("applications.description")}
-          examples={t("applications.examples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("applications.guidance")}
-          scopeNote={t("applications.scope")}
-          title={t("applications.help")}
-        />
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("applications.errors.INVALID_REQUEST")}
+            </p>
+          )}
+          <ApplicationFeedback
+            error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
+          />
+          <ContextHelp
+            description={t("applications.description")}
+            examples={t("applications.examples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("applications.guidance")}
+            scopeNote={t("applications.scope")}
+            title={t("applications.help")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/assignments/shared/ui/assignment-form.tsx b/modules/companies/src/web/assignments/shared/ui/assignment-form.tsx
index e1c4c69..97b074a 100644
--- a/modules/companies/src/web/assignments/shared/ui/assignment-form.tsx
+++ b/modules/companies/src/web/assignments/shared/ui/assignment-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -21,69 +21,73 @@ export function AssignmentForm(props: AssignmentFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-department`}>{t("department")}</Label>
-          <SelectWithAction
-            action={
-              assignment
-                ? undefined
-                : {
-                    label: t("newDepartment"),
-                    onClick: () => setCreatingDepartment(true),
-                  }
-            }
-            disabled={assignment !== undefined || mutation.isPending}
-            id={`${id}-department`}
-            invalid={!!form.formState.errors.departmentId}
-            label={t("department")}
-            onValueChange={(value) =>
-              form.setValue("departmentId", value, { shouldDirty: true, shouldValidate: true })
-            }
-            options={company.departments
-              .filter((item) => item.active || item.id === assignment?.departmentId)
-              .map((department) => ({
-                value: department.id,
-                label: department.name + (department.active ? "" : ` · ${t("inactive")}`),
-              }))}
-            placeholder={t("chooseDepartment")}
-            required
-            value={form.watch("departmentId")}
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-position`}>{t("departmentPosition")}</Label>
-          <Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
-        </div>
-        <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
           <div className="space-y-2">
-            <Label htmlFor={`${id}-start`}>{t("startDate")}</Label>
-            <Input id={`${id}-start`} required type="date" {...form.register("startDate")} />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${id}-end`}>{t("endDate")}</Label>
-            <Input
-              id={`${id}-end`}
-              min={form.watch("startDate")}
-              type="date"
-              {...form.register("endDate")}
+            <Label htmlFor={`${id}-department`}>{t("department")}</Label>
+            <SelectWithAction
+              action={
+                assignment
+                  ? undefined
+                  : {
+                      label: t("newDepartment"),
+                      onClick: () => setCreatingDepartment(true),
+                    }
+              }
+              disabled={assignment !== undefined || mutation.isPending}
+              id={`${id}-department`}
+              invalid={!!form.formState.errors.departmentId}
+              label={t("department")}
+              onValueChange={(value) =>
+                form.setValue("departmentId", value, { shouldDirty: true, shouldValidate: true })
+              }
+              options={company.departments
+                .filter((item) => item.active || item.id === assignment?.departmentId)
+                .map((department) => ({
+                  value: department.id,
+                  label: department.name + (department.active ? "" : ` · ${t("inactive")}`),
+                }))}
+              placeholder={t("chooseDepartment")}
+              required
+              value={form.watch("departmentId")}
             />
           </div>
-        </div>
-        <SwitchField
-          checked={!form.watch("endDate") && form.watch("isPrimary")}
-          disabled={!!form.watch("endDate")}
-          id={`${id}-primary`}
-          label={t("primaryDepartment")}
-          onCheckedChange={(checked) => form.setValue("isPrimary", checked, { shouldDirty: true })}
-        />
-        <p className="text-xs text-muted-foreground">{t("assignmentHelp")}</p>
-        <CompanyFeedback
-          error={mutation.error}
-          invalid={Object.keys(form.formState.errors).length > 0}
-        />
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-position`}>{t("departmentPosition")}</Label>
+            <Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor={`${id}-start`}>{t("startDate")}</Label>
+              <Input id={`${id}-start`} required type="date" {...form.register("startDate")} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${id}-end`}>{t("endDate")}</Label>
+              <Input
+                id={`${id}-end`}
+                min={form.watch("startDate")}
+                type="date"
+                {...form.register("endDate")}
+              />
+            </div>
+          </div>
+          <SwitchField
+            checked={!form.watch("endDate") && form.watch("isPrimary")}
+            disabled={!!form.watch("endDate")}
+            id={`${id}-primary`}
+            label={t("primaryDepartment")}
+            onCheckedChange={(checked) =>
+              form.setValue("isPrimary", checked, { shouldDirty: true })
+            }
+          />
+          <p className="text-xs text-muted-foreground">{t("assignmentHelp")}</p>
+          <CompanyFeedback
+            error={mutation.error}
+            invalid={Object.keys(form.formState.errors).length > 0}
+          />
 
-        <EntityHelp kind="assignment" />
+          <EntityHelp kind="assignment" />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/certificate-configurations/shared/ui/certificate-configuration-form.tsx b/modules/companies/src/web/certificate-configurations/shared/ui/certificate-configuration-form.tsx
index 5734869..afdd301 100644
--- a/modules/companies/src/web/certificate-configurations/shared/ui/certificate-configuration-form.tsx
+++ b/modules/companies/src/web/certificate-configurations/shared/ui/certificate-configuration-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -44,104 +44,106 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
+                <SelectWithAction
+                  action={
+                    fixed
+                      ? undefined
+                      : { label: t("profiles.new"), onClick: () => setQuick("profile") }
+                  }
+                  disabled={fixed || !ready}
+                  id={`${prefix}-profile`}
+                  label={t("mail.profile")}
+                  onValueChange={(id) => form.setValue("profileId", id)}
+                  options={certificateProfiles(values.profileId, profiles.data?.profiles)}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.profileId}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-resource`}>{t("certificates.resource")}</Label>
+                <SelectWithAction
+                  action={
+                    configuration
+                      ? undefined
+                      : {
+                          label: t("certificates.newResource"),
+                          onClick: () => setQuick("certificate"),
+                        }
+                  }
+                  disabled={!!configuration || !ready}
+                  id={`${prefix}-resource`}
+                  label={t("certificates.resource")}
+                  onValueChange={(id) => form.setValue("resourceId", id)}
+                  options={certificateOptions(
+                    values.resourceId,
+                    resources.data?.resources,
+                    catalog.data?.items
+                  )}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.resourceId}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-state`}
+                  label={t("mail.state")}
+                  onValueChange={changeState}
+                  options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.state}
+                />
+              </div>
+            </div>
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
-              <SelectWithAction
-                action={
-                  fixed
-                    ? undefined
-                    : { label: t("profiles.new"), onClick: () => setQuick("profile") }
-                }
-                disabled={fixed || !ready}
-                id={`${prefix}-profile`}
-                label={t("mail.profile")}
-                onValueChange={(id) => form.setValue("profileId", id)}
-                options={certificateProfiles(values.profileId, profiles.data?.profiles)}
-                placeholder={t("mail.choose")}
-                required
-                value={values.profileId}
+              <Label htmlFor={`${prefix}-location`}>{t("certificates.location")}</Label>
+              <Input
+                id={`${prefix}-location`}
+                maxLength={255}
+                onChange={(event) => form.setValue("location", event.target.value || null)}
+                value={values.location ?? ""}
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-resource`}>{t("certificates.resource")}</Label>
-              <SelectWithAction
-                action={
-                  configuration
-                    ? undefined
-                    : {
-                        label: t("certificates.newResource"),
-                        onClick: () => setQuick("certificate"),
-                      }
-                }
-                disabled={!!configuration || !ready}
-                id={`${prefix}-resource`}
-                label={t("certificates.resource")}
-                onValueChange={(id) => form.setValue("resourceId", id)}
-                options={certificateOptions(
-                  values.resourceId,
-                  resources.data?.resources,
-                  catalog.data?.items
-                )}
-                placeholder={t("mail.choose")}
-                required
-                value={values.resourceId}
+              <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                onChange={(event) => form.setValue("notes", event.target.value || null)}
+                rows={3}
+                value={values.notes ?? ""}
               />
             </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
-              <SelectWithAction
-                id={`${prefix}-state`}
-                label={t("mail.state")}
-                onValueChange={changeState}
-                options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
-                placeholder={t("mail.choose")}
-                required
-                value={values.state}
-              />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-location`}>{t("certificates.location")}</Label>
-            <Input
-              id={`${prefix}-location`}
-              maxLength={255}
-              onChange={(event) => form.setValue("location", event.target.value || null)}
-              value={values.location ?? ""}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              onChange={(event) => form.setValue("notes", event.target.value || null)}
-              rows={3}
-              value={values.notes ?? ""}
-            />
-          </div>
-        </fieldset>
-        {configuration && (
-          <p className="text-sm text-muted-foreground">{t("certificates.fixed")}</p>
-        )}
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("certificates.errors.INVALID_REQUEST")}
-          </p>
-        )}
-        <CertificateFeedback
-          error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
-        />
-        <ContextHelp
-          description={t("certificates.description")}
-          examples={t("certificates.examples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("certificates.guidance")}
-          scopeNote={t("certificates.scope")}
-          title={t("certificates.help")}
-        />
+          </fieldset>
+          {configuration && (
+            <p className="text-sm text-muted-foreground">{t("certificates.fixed")}</p>
+          )}
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("certificates.errors.INVALID_REQUEST")}
+            </p>
+          )}
+          <CertificateFeedback
+            error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
+          />
+          <ContextHelp
+            description={t("certificates.description")}
+            examples={t("certificates.examples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("certificates.guidance")}
+            scopeNote={t("certificates.scope")}
+            title={t("certificates.help")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/companies/shared/ui/company-form.tsx b/modules/companies/src/web/companies/shared/ui/company-form.tsx
index 1edbb52..0c330bb 100644
--- a/modules/companies/src/web/companies/shared/ui/company-form.tsx
+++ b/modules/companies/src/web/companies/shared/ui/company-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -20,40 +20,42 @@ export function CompanyForm(props: CompanyFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      {showTitle && (
-        <h2 className="text-lg font-semibold">{t(company ? "editCompany" : "newCompany")}</h2>
-      )}
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-        <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
-      </div>
-      <SwitchField
-        checked={form.watch("active")}
-        id={`${id}-active`}
-        label={t("activeCompany")}
-        onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
-      />
-      <CompanyLogoField
-        companyId={savedCompanyId}
-        disabled={mutation.isPending}
-        draft={logoDraft}
-        logoVersion={mutation.data ? mutation.data.company.logoVersion : company?.logoVersion}
-        name={form.watch("name")}
-        onChange={setLogoDraft}
-      />
-      {mutation.isError && partialSave && (
-        <p className="text-sm text-muted-foreground" role="status">
-          {t("logo.partialSave")}
-        </p>
-      )}
-      <CompanyFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-        success={mutation.isSuccess}
-      />
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        {showTitle && (
+          <h2 className="text-lg font-semibold">{t(company ? "editCompany" : "newCompany")}</h2>
+        )}
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-name`}>{t("name")}</Label>
+          <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
+        </div>
+        <SwitchField
+          checked={form.watch("active")}
+          id={`${id}-active`}
+          label={t("activeCompany")}
+          onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
+        />
+        <CompanyLogoField
+          companyId={savedCompanyId}
+          disabled={mutation.isPending}
+          draft={logoDraft}
+          logoVersion={mutation.data ? mutation.data.company.logoVersion : company?.logoVersion}
+          name={form.watch("name")}
+          onChange={setLogoDraft}
+        />
+        {mutation.isError && partialSave && (
+          <p className="text-sm text-muted-foreground" role="status">
+            {t("logo.partialSave")}
+          </p>
+        )}
+        <CompanyFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
+          success={mutation.isSuccess}
+        />
 
-      <EntityHelp kind="company" />
+        <EntityHelp kind="company" />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/departments/shared/ui/department-form.tsx b/modules/companies/src/web/departments/shared/ui/department-form.tsx
index 1d30e31..5e186a5 100644
--- a/modules/companies/src/web/departments/shared/ui/department-form.tsx
+++ b/modules/companies/src/web/departments/shared/ui/department-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -17,27 +17,29 @@ export function DepartmentForm(props: DepartmentFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      <div className="space-y-2">
-        <Label htmlFor={id}>{t("name")}</Label>
-        <Input id={id} maxLength={100} required {...form.register("name")} />
-      </div>
-      <SwitchField
-        checked={form.watch("active")}
-        disabled={requireActive}
-        id={`${id}-active`}
-        label={t("activeDepartment")}
-        onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
-      />
-      {department && (
-        <p className="text-sm text-muted-foreground">{t("departmentDeactivationHelp")}</p>
-      )}
-      <CompanyFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <div className="space-y-2">
+          <Label htmlFor={id}>{t("name")}</Label>
+          <Input id={id} maxLength={100} required {...form.register("name")} />
+        </div>
+        <SwitchField
+          checked={form.watch("active")}
+          disabled={requireActive}
+          id={`${id}-active`}
+          label={t("activeDepartment")}
+          onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
+        />
+        {department && (
+          <p className="text-sm text-muted-foreground">{t("departmentDeactivationHelp")}</p>
+        )}
+        <CompanyFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
+        />
 
-      <EntityHelp kind="department" />
+        <EntityHelp kind="department" />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/folder-mappings/shared/ui/folder-mapping-form.tsx b/modules/companies/src/web/folder-mappings/shared/ui/folder-mapping-form.tsx
index 0df81ba..df51fd7 100644
--- a/modules/companies/src/web/folder-mappings/shared/ui/folder-mapping-form.tsx
+++ b/modules/companies/src/web/folder-mappings/shared/ui/folder-mapping-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -40,93 +40,95 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <FolderMappingTargets
-            company={company}
-            fixed={Boolean(mapping)}
-            form={form}
-            initialProfileId={initialProfileId}
-            items={items}
-            needs={needs}
-            onNeedChange={changeNeed}
-            onQuickCreate={setQuick}
-            prefix={prefix}
-            profile={profile}
-            profiles={profiles.data?.profiles ?? []}
-            ready={ready}
-          />
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-path`}>{t("folders.path")}</Label>
-            <Input id={`${prefix}-path`} readOnly value={values.path} />
-          </div>
-          {mapping && currentPath !== values.path && (
-            <div className="rounded-md border p-3 text-sm space-y-2">
-              <p>
-                {t("folders.currentPath")}: {currentPath}
-              </p>
-              <Button
-                onClick={() => form.setValue("path", currentPath)}
-                type="button"
-                variant="outline"
-              >
-                {t("folders.useCurrentPath")}
-              </Button>
-            </div>
-          )}
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-letter`}>{t("folders.letter")}</Label>
-              <Input
-                id={`${prefix}-letter`}
-                maxLength={2}
-                onChange={(event) => form.setValue("driveLetter", event.target.value || null)}
-                placeholder="G:"
-                value={values.driveLetter ?? ""}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
-              <SelectWithAction
-                id={`${prefix}-state`}
-                label={t("mail.state")}
-                onValueChange={(state) => {
-                  const parsed = FolderMappingInputSchema.shape.state.safeParse(state);
-                  if (parsed.success) {
-                    form.setValue("state", parsed.data);
-                  }
-                }}
-                options={states.map((state) => ({ value: state, label: t(`mail.${state}`) }))}
-                placeholder={t("mail.choose")}
-                required
-                value={values.state}
-              />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              onChange={(event) => form.setValue("notes", event.target.value || null)}
-              rows={3}
-              value={values.notes ?? ""}
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <FolderMappingTargets
+              company={company}
+              fixed={Boolean(mapping)}
+              form={form}
+              initialProfileId={initialProfileId}
+              items={items}
+              needs={needs}
+              onNeedChange={changeNeed}
+              onQuickCreate={setQuick}
+              prefix={prefix}
+              profile={profile}
+              profiles={profiles.data?.profiles ?? []}
+              ready={ready}
             />
-          </div>
-        </fieldset>
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p role="alert">{t("folders.errors.INVALID_REQUEST")}</p>
-        )}
-        <FolderFeedback error={mutation.error ?? access.error ?? profiles.error} />
-        <ContextHelp
-          description={t("folders.description")}
-          examples={t("folders.examples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("folders.guidance")}
-          scopeNote={t("folders.scope")}
-          title={t("folders.help")}
-        />
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-path`}>{t("folders.path")}</Label>
+              <Input id={`${prefix}-path`} readOnly value={values.path} />
+            </div>
+            {mapping && currentPath !== values.path && (
+              <div className="rounded-md border p-3 text-sm space-y-2">
+                <p>
+                  {t("folders.currentPath")}: {currentPath}
+                </p>
+                <Button
+                  onClick={() => form.setValue("path", currentPath)}
+                  type="button"
+                  variant="outline"
+                >
+                  {t("folders.useCurrentPath")}
+                </Button>
+              </div>
+            )}
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-letter`}>{t("folders.letter")}</Label>
+                <Input
+                  id={`${prefix}-letter`}
+                  maxLength={2}
+                  onChange={(event) => form.setValue("driveLetter", event.target.value || null)}
+                  placeholder="G:"
+                  value={values.driveLetter ?? ""}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-state`}
+                  label={t("mail.state")}
+                  onValueChange={(state) => {
+                    const parsed = FolderMappingInputSchema.shape.state.safeParse(state);
+                    if (parsed.success) {
+                      form.setValue("state", parsed.data);
+                    }
+                  }}
+                  options={states.map((state) => ({ value: state, label: t(`mail.${state}`) }))}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.state}
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                onChange={(event) => form.setValue("notes", event.target.value || null)}
+                rows={3}
+                value={values.notes ?? ""}
+              />
+            </div>
+          </fieldset>
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p role="alert">{t("folders.errors.INVALID_REQUEST")}</p>
+          )}
+          <FolderFeedback error={mutation.error ?? access.error ?? profiles.error} />
+          <ContextHelp
+            description={t("folders.description")}
+            examples={t("folders.examples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("folders.guidance")}
+            scopeNote={t("folders.scope")}
+            title={t("folders.help")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending || !ready} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/intervention-templates/shared/ui/template-form.tsx b/modules/companies/src/web/intervention-templates/shared/ui/template-form.tsx
index 009212b..727bb45 100644
--- a/modules/companies/src/web/intervention-templates/shared/ui/template-form.tsx
+++ b/modules/companies/src/web/intervention-templates/shared/ui/template-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -20,53 +20,57 @@ export function InterventionTemplateForm(props: InterventionTemplateFormProps) {
   const { t } = useTranslation("companies");
   const prefix = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
-      <fieldset className="space-y-4" disabled={mutation.isPending}>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
-          <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-description`}>{t("interventionTemplates.description")}</Label>
-          <Textarea
-            id={`${prefix}-description`}
-            maxLength={4000}
-            rows={3}
-            {...form.register("description")}
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <fieldset className="space-y-4" disabled={mutation.isPending}>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
+            <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-description`}>
+              {t("interventionTemplates.description")}
+            </Label>
+            <Textarea
+              id={`${prefix}-description`}
+              maxLength={4000}
+              rows={3}
+              {...form.register("description")}
+            />
+          </div>
+          <SwitchField
+            checked={form.watch("active")}
+            id={`${prefix}-active`}
+            label={t("active")}
+            onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
           />
-        </div>
-        <SwitchField
-          checked={form.watch("active")}
-          id={`${prefix}-active`}
-          label={t("active")}
-          onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
+          <h3 className="font-medium">{t("interventionTemplates.steps")}</h3>
+          {steps.fields.map((step, index) => (
+            <TemplateStepFields
+              count={steps.fields.length}
+              form={form}
+              index={index}
+              key={step.fieldKey}
+              onMove={steps.move}
+              onRemove={steps.remove}
+              prefix={prefix}
+            />
+          ))}
+          <Button
+            disabled={steps.fields.length >= 100}
+            onClick={() => steps.append(newTemplateStep())}
+            type="button"
+            variant="outline"
+          >
+            {t("interventionTemplates.addStep")}
+          </Button>
+        </fieldset>
+        <InterventionTemplateFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
         />
-        <h3 className="font-medium">{t("interventionTemplates.steps")}</h3>
-        {steps.fields.map((step, index) => (
-          <TemplateStepFields
-            count={steps.fields.length}
-            form={form}
-            index={index}
-            key={step.fieldKey}
-            onMove={steps.move}
-            onRemove={steps.remove}
-            prefix={prefix}
-          />
-        ))}
-        <Button
-          disabled={steps.fields.length >= 100}
-          onClick={() => steps.append(newTemplateStep())}
-          type="button"
-          variant="outline"
-        >
-          {t("interventionTemplates.addStep")}
-        </Button>
-      </fieldset>
-      <InterventionTemplateFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <InterventionTemplateHelp />
+        <InterventionTemplateHelp />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/interventions/shared/ui/intervention-form.tsx b/modules/companies/src/web/interventions/shared/ui/intervention-form.tsx
index c23296d..3c7e774 100644
--- a/modules/companies/src/web/interventions/shared/ui/intervention-form.tsx
+++ b/modules/companies/src/web/interventions/shared/ui/intervention-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -52,103 +52,105 @@ export function InterventionForm(props: InterventionFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <InterventionCompanyField
-            companies={data.companies}
-            companyId={companyId}
-            fixed={isCompanyFixed(scope, intervention, initialTicket)}
-            onChange={changeCompany}
-            onNew={() => setQuick("company")}
-            prefix={prefix}
-          />
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-subject`}>{t("interventions.subject")}</Label>
-            <Input
-              id={`${prefix}-subject`}
-              maxLength={200}
-              required
-              {...form.register("subject")}
-            />
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-ticket`}>{t("interventions.ticket")}</Label>
-              <SelectWithAction
-                action={{
-                  label: t("tickets.new"),
-                  onClick: () => setQuick("ticket"),
-                  disabled: !(companyId && lookups.data),
-                }}
-                disabled={!lookups.data}
-                id={`${prefix}-ticket`}
-                label={t("interventions.ticket")}
-                onValueChange={selectTicket}
-                options={
-                  lookups.data?.tickets.map((item) => ({
-                    value: item.id,
-                    label: `${item.reference} · ${item.values.subject}`,
-                  })) ?? []
-                }
-                placeholder={t("interventions.internal")}
-                value={values.ticketId ?? ""}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-assignee`}>{t("interventions.assignee")}</Label>
-              <SelectWithAction
-                id={`${prefix}-assignee`}
-                label={t("interventions.assignee")}
-                onValueChange={(id) => form.setValue("assigneeId", id || null)}
-                options={data.technicians
-                  .filter((item) => item.active || item.id === intervention?.values.assigneeId)
-                  .map((item) => ({ value: item.id, label: item.name }))}
-                placeholder={t("interventions.unassigned")}
-                value={values.assigneeId ?? ""}
-              />
-            </div>
-          </div>
-          <InterventionWorkFields form={form} prefix={prefix} />
-          {companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
-          <InterventionFeedback error={lookups.error} />
-          {lookups.isError && (
-            <Button
-              onClick={() => {
-                lookups.refetch().catch(() => undefined);
-              }}
-              type="button"
-              variant="outline"
-            >
-              {t("retry")}
-            </Button>
-          )}
-          {lookups.data && (
-            <TicketTargets
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <InterventionCompanyField
+              companies={data.companies}
               companyId={companyId}
-              csrfToken={csrfToken}
-              lookupKey={interventionKeys.lookups(companyId)}
-              lookups={lookups.data}
-              onChange={(affected) => form.setValue("affected", affected)}
-              values={values.affected}
+              fixed={isCompanyFixed(scope, intervention, initialTicket)}
+              onChange={changeCompany}
+              onNew={() => setQuick("company")}
+              prefix={prefix}
             />
-          )}
-          <InterventionProcedureFields
-            applied={applied}
-            intervention={intervention}
-            lookups={lookups.data}
-            onApply={applyTemplate}
-            onNewTemplate={() => setQuick("template")}
-            onSelect={setSelectedTemplate}
-            prefix={prefix}
-            selectedTemplate={selectedTemplate}
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-subject`}>{t("interventions.subject")}</Label>
+              <Input
+                id={`${prefix}-subject`}
+                maxLength={200}
+                required
+                {...form.register("subject")}
+              />
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-ticket`}>{t("interventions.ticket")}</Label>
+                <SelectWithAction
+                  action={{
+                    label: t("tickets.new"),
+                    onClick: () => setQuick("ticket"),
+                    disabled: !(companyId && lookups.data),
+                  }}
+                  disabled={!lookups.data}
+                  id={`${prefix}-ticket`}
+                  label={t("interventions.ticket")}
+                  onValueChange={selectTicket}
+                  options={
+                    lookups.data?.tickets.map((item) => ({
+                      value: item.id,
+                      label: `${item.reference} · ${item.values.subject}`,
+                    })) ?? []
+                  }
+                  placeholder={t("interventions.internal")}
+                  value={values.ticketId ?? ""}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-assignee`}>{t("interventions.assignee")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-assignee`}
+                  label={t("interventions.assignee")}
+                  onValueChange={(id) => form.setValue("assigneeId", id || null)}
+                  options={data.technicians
+                    .filter((item) => item.active || item.id === intervention?.values.assigneeId)
+                    .map((item) => ({ value: item.id, label: item.name }))}
+                  placeholder={t("interventions.unassigned")}
+                  value={values.assigneeId ?? ""}
+                />
+              </div>
+            </div>
+            <InterventionWorkFields form={form} prefix={prefix} />
+            {companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
+            <InterventionFeedback error={lookups.error} />
+            {lookups.isError && (
+              <Button
+                onClick={() => {
+                  lookups.refetch().catch(() => undefined);
+                }}
+                type="button"
+                variant="outline"
+              >
+                {t("retry")}
+              </Button>
+            )}
+            {lookups.data && (
+              <TicketTargets
+                companyId={companyId}
+                csrfToken={csrfToken}
+                lookupKey={interventionKeys.lookups(companyId)}
+                lookups={lookups.data}
+                onChange={(affected) => form.setValue("affected", affected)}
+                values={values.affected}
+              />
+            )}
+            <InterventionProcedureFields
+              applied={applied}
+              intervention={intervention}
+              lookups={lookups.data}
+              onApply={applyTemplate}
+              onNewTemplate={() => setQuick("template")}
+              onSelect={setSelectedTemplate}
+              prefix={prefix}
+              selectedTemplate={selectedTemplate}
+            />
+            <InterventionSteps form={form} prefix={prefix} />
+          </fieldset>
+          <InterventionFeedback
+            error={mutation.error}
+            invalid={Object.keys(form.formState.errors).length > 0}
           />
-          <InterventionSteps form={form} prefix={prefix} />
-        </fieldset>
-        <InterventionFeedback
-          error={mutation.error}
-          invalid={Object.keys(form.formState.errors).length > 0}
-        />
-        <InterventionHelp />
+          <InterventionHelp />
+        </FormBody>
         <FormActions>
           <Button
             disabled={mutation.isPending || !companyId || !lookups.data || lookups.isError}
diff --git a/modules/companies/src/web/mail-configurations/shared/ui/mail-configuration-form.tsx b/modules/companies/src/web/mail-configurations/shared/ui/mail-configuration-form.tsx
index 43fb431..e51d692 100644
--- a/modules/companies/src/web/mail-configurations/shared/ui/mail-configuration-form.tsx
+++ b/modules/companies/src/web/mail-configurations/shared/ui/mail-configuration-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Label } from "@repo/shadcn-ui/components/label";
 import { Textarea } from "@repo/shadcn-ui/components/textarea";
@@ -44,71 +44,73 @@ export function MailConfigurationForm(props: MailConfigurationFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={disabled}>
-          {legacy && (
-            <p className="rounded-md border p-3 text-sm">
-              {t("mail.legacyLink")} {legacy.address} · {personLabel(legacy.personId)} ·{" "}
-              {assetLabel(legacy.assetId)}
-            </p>
-          )}
-          <MailConfigurationTargets
-            fixed={fixed}
-            form={form}
-            initialProfileId={initialProfileId}
-            mailboxes={mailboxOptions(
-              mailboxes.data?.mailboxes ?? [],
-              values.mailboxId,
-              legacy
-            ).map((item) => ({ value: item.id, label: item.values.address }))}
-            onQuickCreate={setQuick}
-            prefix={prefix}
-            profiles={profileOptions(profiles.data?.profiles ?? [], values.profileId, legacy).map(
-              (item) => ({
-                value: item.id,
-                label:
-                  profileLabel(item.id) +
-                  " · " +
-                  personLabel(item.values.personId) +
-                  " · " +
-                  assetLabel(item.values.assetId),
-              })
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={disabled}>
+            {legacy && (
+              <p className="rounded-md border p-3 text-sm">
+                {t("mail.legacyLink")} {legacy.address} · {personLabel(legacy.personId)} ·{" "}
+                {assetLabel(legacy.assetId)}
+              </p>
             )}
-            ready={ready}
-            states={states}
-          />
-          <MailboxUsagePrompt
-            authorized={authorized ?? false}
-            mailbox={selectedMailbox}
-            onRegister={() => setQuick("use")}
-            profile={selectedProfile}
-          />
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              onChange={(event) => form.setValue("notes", event.target.value || null)}
-              rows={3}
-              value={values.notes ?? ""}
+            <MailConfigurationTargets
+              fixed={fixed}
+              form={form}
+              initialProfileId={initialProfileId}
+              mailboxes={mailboxOptions(
+                mailboxes.data?.mailboxes ?? [],
+                values.mailboxId,
+                legacy
+              ).map((item) => ({ value: item.id, label: item.values.address }))}
+              onQuickCreate={setQuick}
+              prefix={prefix}
+              profiles={profileOptions(profiles.data?.profiles ?? [], values.profileId, legacy).map(
+                (item) => ({
+                  value: item.id,
+                  label:
+                    profileLabel(item.id) +
+                    " · " +
+                    personLabel(item.values.personId) +
+                    " · " +
+                    assetLabel(item.values.assetId),
+                })
+              )}
+              ready={ready}
+              states={states}
             />
-          </div>
-        </fieldset>
-        {fixed && <p className="text-sm text-muted-foreground">{t("mail.fixed")}</p>}
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
-        )}
-        <MailFeedback
-          error={mutation.error ?? profiles.error ?? mailboxes.error ?? inventory.error}
-        />
-        <ContextHelp
-          description={t("mail.description")}
-          examples={t("mail.examples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("mail.guidance")}
-          scopeNote={t("mail.scope")}
-          title={t("mail.help")}
-        />
+            <MailboxUsagePrompt
+              authorized={authorized ?? false}
+              mailbox={selectedMailbox}
+              onRegister={() => setQuick("use")}
+              profile={selectedProfile}
+            />
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                onChange={(event) => form.setValue("notes", event.target.value || null)}
+                rows={3}
+                value={values.notes ?? ""}
+              />
+            </div>
+          </fieldset>
+          {fixed && <p className="text-sm text-muted-foreground">{t("mail.fixed")}</p>}
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
+          )}
+          <MailFeedback
+            error={mutation.error ?? profiles.error ?? mailboxes.error ?? inventory.error}
+          />
+          <ContextHelp
+            description={t("mail.description")}
+            examples={t("mail.examples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("mail.guidance")}
+            scopeNote={t("mail.scope")}
+            title={t("mail.help")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={disabled || !ready} type="submit">
             {t(disabled ? "saving" : "save")}
diff --git a/modules/companies/src/web/mailbox-uses/shared/ui/mailbox-use-form.tsx b/modules/companies/src/web/mailbox-uses/shared/ui/mailbox-use-form.tsx
index 5b67caf..87101fa 100644
--- a/modules/companies/src/web/mailbox-uses/shared/ui/mailbox-use-form.tsx
+++ b/modules/companies/src/web/mailbox-uses/shared/ui/mailbox-use-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -31,82 +31,84 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-mailbox`}>{t("mailbox.titleSingle")}</Label>
-            <SelectWithAction
-              action={
-                canCreate(!!use, initialMailboxId, allowQuickCreate)
-                  ? { label: t("mailbox.new"), onClick: () => setQuick("mailbox") }
-                  : undefined
-              }
-              disabled={!!use || !!initialMailboxId}
-              id={`${prefix}-mailbox`}
-              label={t("mailbox.titleSingle")}
-              onValueChange={(id) => form.setValue("mailboxId", id)}
-              options={(query.data?.mailboxes ?? [])
-                .filter((item) => item.values.active || item.id === values.mailboxId)
-                .map((item) => ({ value: item.id, label: item.values.address }))}
-              placeholder={t("mail.choose")}
-              required
-              value={values.mailboxId}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-person`}>{t("mail.person")}</Label>
-            <SelectWithAction
-              action={
-                canCreate(!!use, initialPersonId, allowQuickCreate)
-                  ? { label: t("newPerson"), onClick: () => setQuick("person") }
-                  : undefined
-              }
-              disabled={!!use || !!initialPersonId}
-              id={`${prefix}-person`}
-              label={t("mail.person")}
-              onValueChange={(id) => form.setValue("personId", id)}
-              options={company.people
-                .filter((item) => item.active || item.id === values.personId)
-                .map((item) => ({ value: item.id, label: item.name }))}
-              placeholder={t("mail.choose")}
-              required
-              value={values.personId}
-            />
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-start`}>{t("mailbox.start")}</Label>
-              <Input
-                disabled={!!use}
-                id={`${prefix}-start`}
+              <Label htmlFor={`${prefix}-mailbox`}>{t("mailbox.titleSingle")}</Label>
+              <SelectWithAction
+                action={
+                  canCreate(!!use, initialMailboxId, allowQuickCreate)
+                    ? { label: t("mailbox.new"), onClick: () => setQuick("mailbox") }
+                    : undefined
+                }
+                disabled={!!use || !!initialMailboxId}
+                id={`${prefix}-mailbox`}
+                label={t("mailbox.titleSingle")}
+                onValueChange={(id) => form.setValue("mailboxId", id)}
+                options={(query.data?.mailboxes ?? [])
+                  .filter((item) => item.values.active || item.id === values.mailboxId)
+                  .map((item) => ({ value: item.id, label: item.values.address }))}
+                placeholder={t("mail.choose")}
                 required
-                type="date"
-                {...form.register("startDate")}
+                value={values.mailboxId}
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-end`}>{t("mailbox.end")}</Label>
-              <Input
-                id={`${prefix}-end`}
-                onChange={(event) => form.setValue("endDate", event.target.value || null)}
-                required={!!use}
-                type="date"
-                value={values.endDate ?? ""}
+              <Label htmlFor={`${prefix}-person`}>{t("mail.person")}</Label>
+              <SelectWithAction
+                action={
+                  canCreate(!!use, initialPersonId, allowQuickCreate)
+                    ? { label: t("newPerson"), onClick: () => setQuick("person") }
+                    : undefined
+                }
+                disabled={!!use || !!initialPersonId}
+                id={`${prefix}-person`}
+                label={t("mail.person")}
+                onValueChange={(id) => form.setValue("personId", id)}
+                options={company.people
+                  .filter((item) => item.active || item.id === values.personId)
+                  .map((item) => ({ value: item.id, label: item.name }))}
+                placeholder={t("mail.choose")}
+                required
+                value={values.personId}
               />
             </div>
-          </div>
-        </fieldset>
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
-        )}
-        <MailFeedback error={mutation.error ?? query.error} />
-        <ContextHelp
-          description={t("mailbox.useDescription")}
-          examples={t("mailbox.useExamples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("mailbox.useGuidance")}
-          title={t("mailbox.useHelp")}
-        />
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-start`}>{t("mailbox.start")}</Label>
+                <Input
+                  disabled={!!use}
+                  id={`${prefix}-start`}
+                  required
+                  type="date"
+                  {...form.register("startDate")}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-end`}>{t("mailbox.end")}</Label>
+                <Input
+                  id={`${prefix}-end`}
+                  onChange={(event) => form.setValue("endDate", event.target.value || null)}
+                  required={!!use}
+                  type="date"
+                  value={values.endDate ?? ""}
+                />
+              </div>
+            </div>
+          </fieldset>
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
+          )}
+          <MailFeedback error={mutation.error ?? query.error} />
+          <ContextHelp
+            description={t("mailbox.useDescription")}
+            examples={t("mailbox.useExamples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("mailbox.useGuidance")}
+            title={t("mailbox.useHelp")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending || !query.data} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/people/shared/ui/person-editor-dialog.tsx b/modules/companies/src/web/people/shared/ui/person-editor-dialog.tsx
index e89dfbf..246d496 100644
--- a/modules/companies/src/web/people/shared/ui/person-editor-dialog.tsx
+++ b/modules/companies/src/web/people/shared/ui/person-editor-dialog.tsx
@@ -19,8 +19,8 @@ export function PersonEditorDialog({
       formActions
       onOpenChange={onOpenChange}
       open={open}
+      size="medium"
       title={t(formProps.person ? "editPerson" : "newPerson")}
-      wide
     >
       <PersonForm {...formProps} key={formProps.person?.id ?? "new"} />
     </FormDialog>
diff --git a/modules/companies/src/web/people/shared/ui/person-form.tsx b/modules/companies/src/web/people/shared/ui/person-form.tsx
index 49a67df..af81bfe 100644
--- a/modules/companies/src/web/people/shared/ui/person-form.tsx
+++ b/modules/companies/src/web/people/shared/ui/person-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -17,49 +17,51 @@ export function PersonForm(props: PersonFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="max-w-2xl space-y-6" onSubmit={submit}>
-      <div className="grid gap-4 sm:grid-cols-2">
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-          <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-name`}>{t("name")}</Label>
+            <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-position`}>{t("generalPosition")}</Label>
+            <Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-email`}>{t("emailOptional")}</Label>
+            <Input id={`${id}-email`} maxLength={254} type="email" {...form.register("email")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-phone`}>{t("phoneOptional")}</Label>
+            <Input id={`${id}-phone`} maxLength={50} type="tel" {...form.register("phone")} />
+          </div>
         </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-position`}>{t("generalPosition")}</Label>
-          <Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-email`}>{t("emailOptional")}</Label>
-          <Input id={`${id}-email`} maxLength={254} type="email" {...form.register("email")} />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-phone`}>{t("phoneOptional")}</Label>
-          <Input id={`${id}-phone`} maxLength={50} type="tel" {...form.register("phone")} />
-        </div>
-      </div>
-      <SwitchField
-        checked={form.watch("active")}
-        disabled={requireActive}
-        id={`${id}-active`}
-        label={t("activePerson")}
-        onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
-      />
-      <SwitchField
-        checked={form.watch("isContact")}
-        id={`${id}-contact`}
-        label={t("isContact")}
-        onCheckedChange={(isContact) =>
-          form.setValue("isContact", isContact, { shouldDirty: true })
-        }
-      />
-      {person?.active && !form.watch("active") && (
-        <p className="text-sm text-muted-foreground">{t("deactivationHelp")}</p>
-      )}
-      <CompanyFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <p className="text-sm text-muted-foreground">{t("personHelp")}</p>
-      <EntityHelp kind="person" />
+        <SwitchField
+          checked={form.watch("active")}
+          disabled={requireActive}
+          id={`${id}-active`}
+          label={t("activePerson")}
+          onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
+        />
+        <SwitchField
+          checked={form.watch("isContact")}
+          id={`${id}-contact`}
+          label={t("isContact")}
+          onCheckedChange={(isContact) =>
+            form.setValue("isContact", isContact, { shouldDirty: true })
+          }
+        />
+        {person?.active && !form.watch("active") && (
+          <p className="text-sm text-muted-foreground">{t("deactivationHelp")}</p>
+        )}
+        <CompanyFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
+        />
+        <p className="text-sm text-muted-foreground">{t("personHelp")}</p>
+        <EntityHelp kind="person" />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/printer-configurations/shared/ui/printer-configuration-form.tsx b/modules/companies/src/web/printer-configurations/shared/ui/printer-configuration-form.tsx
index e0339c3..773649f 100644
--- a/modules/companies/src/web/printer-configurations/shared/ui/printer-configuration-form.tsx
+++ b/modules/companies/src/web/printer-configurations/shared/ui/printer-configuration-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -47,118 +47,121 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
-              <SelectWithAction
-                action={
-                  profileFixed
-                    ? undefined
-                    : { label: t("profiles.new"), onClick: () => setQuick("profile") }
-                }
-                disabled={profileFixed || !ready}
-                id={`${prefix}-profile`}
-                label={t("mail.profile")}
-                onValueChange={(id) => {
-                  form.setValue("profileId", id);
-                  form.setValue("printerId", "");
-                }}
-                options={profileOptions(profiles.data?.profiles ?? [], values.profileId)}
-                placeholder={t("mail.choose")}
-                required
-                value={values.profileId}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-printer`}>{t("printers.printer")}</Label>
-              <SelectWithAction
-                action={
-                  configuration
-                    ? undefined
-                    : { label: t("printers.newAsset"), onClick: () => setQuick("printer") }
-                }
-                disabled={!!configuration || !ready || !profile}
-                id={`${prefix}-printer`}
-                label={t("printers.printer")}
-                onValueChange={(id) => form.setValue("printerId", id)}
-                options={printerOptions(
-                  inventory.data?.assets ?? [],
-                  profile?.values.assetId,
-                  values.printerId
-                )}
-                placeholder={t("mail.choose")}
-                required
-                value={values.printerId}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-connection`}>{t("printers.connection")}</Label>
-              <SelectWithAction
-                id={`${prefix}-connection`}
-                label={t("printers.connection")}
-                onValueChange={(value) => {
-                  const parsed = PrinterConfigurationInputSchema.shape.connection.safeParse(value);
-                  if (parsed.success) {
-                    form.setValue("connection", parsed.data);
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
+                <SelectWithAction
+                  action={
+                    profileFixed
+                      ? undefined
+                      : { label: t("profiles.new"), onClick: () => setQuick("profile") }
                   }
-                }}
-                options={["usb", "network"].map((value) => ({
-                  value,
-                  label: t(`printers.${value}`),
-                }))}
-                placeholder={t("mail.choose")}
-                required
-                value={values.connection}
-              />
+                  disabled={profileFixed || !ready}
+                  id={`${prefix}-profile`}
+                  label={t("mail.profile")}
+                  onValueChange={(id) => {
+                    form.setValue("profileId", id);
+                    form.setValue("printerId", "");
+                  }}
+                  options={profileOptions(profiles.data?.profiles ?? [], values.profileId)}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.profileId}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-printer`}>{t("printers.printer")}</Label>
+                <SelectWithAction
+                  action={
+                    configuration
+                      ? undefined
+                      : { label: t("printers.newAsset"), onClick: () => setQuick("printer") }
+                  }
+                  disabled={!!configuration || !ready || !profile}
+                  id={`${prefix}-printer`}
+                  label={t("printers.printer")}
+                  onValueChange={(id) => form.setValue("printerId", id)}
+                  options={printerOptions(
+                    inventory.data?.assets ?? [],
+                    profile?.values.assetId,
+                    values.printerId
+                  )}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.printerId}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-connection`}>{t("printers.connection")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-connection`}
+                  label={t("printers.connection")}
+                  onValueChange={(value) => {
+                    const parsed =
+                      PrinterConfigurationInputSchema.shape.connection.safeParse(value);
+                    if (parsed.success) {
+                      form.setValue("connection", parsed.data);
+                    }
+                  }}
+                  options={["usb", "network"].map((value) => ({
+                    value,
+                    label: t(`printers.${value}`),
+                  }))}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.connection}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-state`}
+                  label={t("mail.state")}
+                  onValueChange={changeState}
+                  options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
+                  placeholder={t("mail.choose")}
+                  required
+                  value={values.state}
+                />
+              </div>
             </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
-              <SelectWithAction
-                id={`${prefix}-state`}
-                label={t("mail.state")}
-                onValueChange={changeState}
-                options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
-                placeholder={t("mail.choose")}
-                required
-                value={values.state}
-              />
-            </div>
-          </div>
-          <SwitchField
-            checked={values.isDefault}
-            disabled={!["pending", "configured"].includes(values.state)}
-            id={`${prefix}-default`}
-            label={t("printers.default")}
-            onCheckedChange={(isDefault) => form.setValue("isDefault", isDefault)}
-          />
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              onChange={(event) => form.setValue("notes", event.target.value || null)}
-              rows={3}
-              value={values.notes ?? ""}
+            <SwitchField
+              checked={values.isDefault}
+              disabled={!["pending", "configured"].includes(values.state)}
+              id={`${prefix}-default`}
+              label={t("printers.default")}
+              onCheckedChange={(isDefault) => form.setValue("isDefault", isDefault)}
             />
-          </div>
-        </fieldset>
-        {configuration && <p className="text-sm text-muted-foreground">{t("printers.fixed")}</p>}
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("printers.errors.INVALID_REQUEST")}
-          </p>
-        )}
-        <PrinterFeedback error={mutation.error ?? profiles.error ?? inventory.error} />
-        <ContextHelp
-          description={t("printers.description")}
-          examples={t("printers.examples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("printers.guidance")}
-          scopeNote={t("printers.scope")}
-          title={t("printers.help")}
-        />
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                onChange={(event) => form.setValue("notes", event.target.value || null)}
+                rows={3}
+                value={values.notes ?? ""}
+              />
+            </div>
+          </fieldset>
+          {configuration && <p className="text-sm text-muted-foreground">{t("printers.fixed")}</p>}
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("printers.errors.INVALID_REQUEST")}
+            </p>
+          )}
+          <PrinterFeedback error={mutation.error ?? profiles.error ?? inventory.error} />
+          <ContextHelp
+            description={t("printers.description")}
+            examples={t("printers.examples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("printers.guidance")}
+            scopeNote={t("printers.scope")}
+            title={t("printers.help")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/process-templates/shared/ui/process-template-form.tsx b/modules/companies/src/web/process-templates/shared/ui/process-template-form.tsx
index 68a2aa1..a57ddc9 100644
--- a/modules/companies/src/web/process-templates/shared/ui/process-template-form.tsx
+++ b/modules/companies/src/web/process-templates/shared/ui/process-template-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -18,58 +18,65 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
   const { t } = useTranslation("companies");
   const prefix = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
-      <fieldset className="space-y-4" disabled={mutation.isPending}>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
-          <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-kind`}>{t("processes.kind")}</Label>
-          <SelectWithAction
-            id={`${prefix}-kind`}
-            label={t("processes.kind")}
-            onValueChange={(value) => {
-              const parsed = ProcessTemplateInputSchema.shape.kind.safeParse(value);
-              if (parsed.success) {
-                form.setValue("kind", parsed.data);
-              }
-            }}
-            options={["onboarding", "change", "offboarding"].map((value) => ({
-              value,
-              label: t(`processes.${value}`),
-            }))}
-            placeholder={t("mail.choose")}
-            value={form.watch("kind")}
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <fieldset className="space-y-4" disabled={mutation.isPending}>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
+            <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-kind`}>{t("processes.kind")}</Label>
+            <SelectWithAction
+              id={`${prefix}-kind`}
+              label={t("processes.kind")}
+              onValueChange={(value) => {
+                const parsed = ProcessTemplateInputSchema.shape.kind.safeParse(value);
+                if (parsed.success) {
+                  form.setValue("kind", parsed.data);
+                }
+              }}
+              options={["onboarding", "change", "offboarding"].map((value) => ({
+                value,
+                label: t(`processes.${value}`),
+              }))}
+              placeholder={t("mail.choose")}
+              value={form.watch("kind")}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-instructions`}>{t("processes.instructions")}</Label>
+            <Textarea
+              id={`${prefix}-instructions`}
+              maxLength={16100}
+              required
+              rows={8}
+              {...form.register("lines")}
+            />
+            <p className="text-sm text-muted-foreground">{t("processes.instructionsHelp")}</p>
+          </div>
+          <SwitchField
+            checked={form.watch("active")}
+            id={`${prefix}-active`}
+            label={t("active")}
+            onCheckedChange={(active) => form.setValue("active", active)}
           />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-instructions`}>{t("processes.instructions")}</Label>
-          <Textarea
-            id={`${prefix}-instructions`}
-            maxLength={16100}
-            required
-            rows={8}
-            {...form.register("lines")}
-          />
-          <p className="text-sm text-muted-foreground">{t("processes.instructionsHelp")}</p>
-        </div>
-        <SwitchField
-          checked={form.watch("active")}
-          id={`${prefix}-active`}
-          label={t("active")}
-          onCheckedChange={(active) => form.setValue("active", active)}
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+            <Textarea
+              id={`${prefix}-notes`}
+              maxLength={4000}
+              rows={3}
+              {...form.register("notes")}
+            />
+          </div>
+        </fieldset>
+        <ProcessFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
         />
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-          <Textarea id={`${prefix}-notes`} maxLength={4000} rows={3} {...form.register("notes")} />
-        </div>
-      </fieldset>
-      <ProcessFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <ProcessHelp template />
+        <ProcessHelp template />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/processes/start/ui/process-start-form.tsx b/modules/companies/src/web/processes/start/ui/process-start-form.tsx
index a9fc04f..de6cf6d 100644
--- a/modules/companies/src/web/processes/start/ui/process-start-form.tsx
+++ b/modules/companies/src/web/processes/start/ui/process-start-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -20,73 +20,75 @@ export function ProcessStartForm(props: ProcessStartFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
-            <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-person`}>{t("profiles.person")}</Label>
-            <SelectWithAction
-              action={{ label: t("newPerson"), onClick: () => setQuick("person") }}
-              id={`${prefix}-person`}
-              label={t("profiles.person")}
-              onValueChange={(id) => form.setValue("personId", id)}
-              options={company.people.map((p) => ({ value: p.id, label: p.name }))}
-              placeholder={t("mail.choose")}
-              required
-              value={values.personId}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-template`}>{t("processes.template")}</Label>
-            <SelectWithAction
-              action={{ label: t("processes.newTemplate"), onClick: () => setQuick("template") }}
-              disabled={!query.data || query.isError}
-              id={`${prefix}-template`}
-              label={t("processes.template")}
-              onValueChange={(id) => form.setValue("templateId", id)}
-              options={(query.data?.templates ?? [])
-                .filter((t) => t.values.active)
-                .map((t) => ({ value: t.id, label: t.values.name }))}
-              placeholder={t("mail.choose")}
-              required
-              value={values.templateId}
-            />
-          </div>
-          {template && (
-            <div className="rounded-md border p-3 text-sm">
-              <p className="font-medium">{t(`processes.${template.values.kind}`)}</p>
-              <ol className="list-decimal pl-5">
-                {template.values.instructions.map((i) => (
-                  <li key={i}>{i}</li>
-                ))}
-              </ol>
-              {template.values.kind !== "onboarding" && (
-                <p className="mt-2">
-                  {review.isPending
-                    ? t("loading")
-                    : t("processes.reviewCount", { count: review.data?.review.length ?? 0 })}
-                </p>
-              )}
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
+              <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
             </div>
-          )}
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              rows={3}
-              {...form.register("notes")}
-            />
-          </div>
-        </fieldset>
-        <ProcessFeedback
-          error={mutation.error ?? query.error ?? review.error}
-          invalid={Object.keys(form.formState.errors).length > 0}
-        />
-        <ProcessHelp />
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-person`}>{t("profiles.person")}</Label>
+              <SelectWithAction
+                action={{ label: t("newPerson"), onClick: () => setQuick("person") }}
+                id={`${prefix}-person`}
+                label={t("profiles.person")}
+                onValueChange={(id) => form.setValue("personId", id)}
+                options={company.people.map((p) => ({ value: p.id, label: p.name }))}
+                placeholder={t("mail.choose")}
+                required
+                value={values.personId}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-template`}>{t("processes.template")}</Label>
+              <SelectWithAction
+                action={{ label: t("processes.newTemplate"), onClick: () => setQuick("template") }}
+                disabled={!query.data || query.isError}
+                id={`${prefix}-template`}
+                label={t("processes.template")}
+                onValueChange={(id) => form.setValue("templateId", id)}
+                options={(query.data?.templates ?? [])
+                  .filter((t) => t.values.active)
+                  .map((t) => ({ value: t.id, label: t.values.name }))}
+                placeholder={t("mail.choose")}
+                required
+                value={values.templateId}
+              />
+            </div>
+            {template && (
+              <div className="rounded-md border p-3 text-sm">
+                <p className="font-medium">{t(`processes.${template.values.kind}`)}</p>
+                <ol className="list-decimal pl-5">
+                  {template.values.instructions.map((i) => (
+                    <li key={i}>{i}</li>
+                  ))}
+                </ol>
+                {template.values.kind !== "onboarding" && (
+                  <p className="mt-2">
+                    {review.isPending
+                      ? t("loading")
+                      : t("processes.reviewCount", { count: review.data?.review.length ?? 0 })}
+                  </p>
+                )}
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                rows={3}
+                {...form.register("notes")}
+              />
+            </div>
+          </fieldset>
+          <ProcessFeedback
+            error={mutation.error ?? query.error ?? review.error}
+            invalid={Object.keys(form.formState.errors).length > 0}
+          />
+          <ProcessHelp />
+        </FormBody>
         <FormActions>
           <Button
             disabled={
diff --git a/modules/companies/src/web/processes/update/ui/process-edit-form.tsx b/modules/companies/src/web/processes/update/ui/process-edit-form.tsx
index 96ec29e..faa8597 100644
--- a/modules/companies/src/web/processes/update/ui/process-edit-form.tsx
+++ b/modules/companies/src/web/processes/update/ui/process-edit-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -20,45 +20,52 @@ export function ProcessEditForm(props: ProcessEditFormProps) {
   const { t } = useTranslation("companies");
   const prefix = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
-      <fieldset className="space-y-4" disabled={mutation.isPending}>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
-          <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
-          <SelectWithAction
-            id={`${prefix}-state`}
-            label={t("mail.state")}
-            onValueChange={(value) => {
-              const parsed = UpdateProcessInputSchema.shape.state.safeParse(value);
-              if (parsed.success) {
-                form.setValue("state", parsed.data);
-              }
-            }}
-            options={["open", "completed", "cancelled"].map((value) => ({
-              value,
-              label: t(`processes.${value}`),
-            }))}
-            placeholder={t("mail.choose")}
-            value={form.watch("state")}
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-          <Textarea id={`${prefix}-notes`} maxLength={4000} rows={3} {...form.register("notes")} />
-        </div>
-        <p className="text-sm text-muted-foreground">{t("processes.resolutionHelp")}</p>
-        {process.values.tasks.map((task, index) => (
-          <ProcessTaskField form={form} index={index} key={task.id} task={task} />
-        ))}
-      </fieldset>
-      <ProcessFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <ProcessHelp />
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        <fieldset className="space-y-4" disabled={mutation.isPending}>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
+            <Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
+            <SelectWithAction
+              id={`${prefix}-state`}
+              label={t("mail.state")}
+              onValueChange={(value) => {
+                const parsed = UpdateProcessInputSchema.shape.state.safeParse(value);
+                if (parsed.success) {
+                  form.setValue("state", parsed.data);
+                }
+              }}
+              options={["open", "completed", "cancelled"].map((value) => ({
+                value,
+                label: t(`processes.${value}`),
+              }))}
+              placeholder={t("mail.choose")}
+              value={form.watch("state")}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+            <Textarea
+              id={`${prefix}-notes`}
+              maxLength={4000}
+              rows={3}
+              {...form.register("notes")}
+            />
+          </div>
+          <p className="text-sm text-muted-foreground">{t("processes.resolutionHelp")}</p>
+          {process.values.tasks.map((task, index) => (
+            <ProcessTaskField form={form} index={index} key={task.id} task={task} />
+          ))}
+        </fieldset>
+        <ProcessFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
+        />
+        <ProcessHelp />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/remote-connections/shared/ui/remote-connection-form.tsx b/modules/companies/src/web/remote-connections/shared/ui/remote-connection-form.tsx
index b28dfd2..09db787 100644
--- a/modules/companies/src/web/remote-connections/shared/ui/remote-connection-form.tsx
+++ b/modules/companies/src/web/remote-connections/shared/ui/remote-connection-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -40,101 +40,103 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-person`}>{t("remote.person")}</Label>
-            <SelectWithAction
-              action={
-                personFixed
-                  ? undefined
-                  : { label: t("newPerson"), onClick: () => setQuick("person") }
-              }
-              disabled={personFixed}
-              id={`${prefix}-person`}
-              label={t("remote.person")}
-              onValueChange={(id) => form.setValue("personId", id)}
-              options={company.people.map((p) => ({ value: p.id, label: p.name }))}
-              placeholder={t("mail.choose")}
-              required
-              value={v.personId}
-            />
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <RemoteEndpointFields
-              assetOptions={assetOptions}
-              company={company}
-              fixed={fixed}
-              form={form}
-              prefix={prefix}
-              ready={ready}
-              resourceOptions={resourceOptions}
-              setQuick={setQuick}
-            />
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
             <div className="space-y-2">
-              <Label htmlFor={`${prefix}-method`}>{t("remote.method")}</Label>
-              <Input
-                id={`${prefix}-method`}
-                list={`${prefix}-methods`}
-                maxLength={80}
-                placeholder={t("remote.methodExample")}
-                required
-                {...form.register("method")}
-              />
-              <datalist id={`${prefix}-methods`}>
-                {["VPN", "RDP", "AnyDesk", "TeamViewer", "Supremo"].map((method) => (
-                  <option key={method} value={method} />
-                ))}
-              </datalist>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
+              <Label htmlFor={`${prefix}-person`}>{t("remote.person")}</Label>
               <SelectWithAction
-                id={`${prefix}-state`}
-                label={t("mail.state")}
-                onValueChange={(value) => {
-                  const parsed = RemoteConnectionInputSchema.shape.state.safeParse(value);
-                  if (parsed.success) {
-                    form.setValue("state", parsed.data);
-                  }
-                }}
-                options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
+                action={
+                  personFixed
+                    ? undefined
+                    : { label: t("newPerson"), onClick: () => setQuick("person") }
+                }
+                disabled={personFixed}
+                id={`${prefix}-person`}
+                label={t("remote.person")}
+                onValueChange={(id) => form.setValue("personId", id)}
+                options={company.people.map((p) => ({ value: p.id, label: p.name }))}
                 placeholder={t("mail.choose")}
-                value={v.state}
+                required
+                value={v.personId}
               />
             </div>
-          </div>
-          <SwitchField
-            checked={v.requiresVpn}
-            id={`${prefix}-vpn`}
-            label={t("remote.requiresVpn")}
-            onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
-          />
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              rows={3}
-              {...form.register("notes")}
+            <div className="grid gap-4 sm:grid-cols-2">
+              <RemoteEndpointFields
+                assetOptions={assetOptions}
+                company={company}
+                fixed={fixed}
+                form={form}
+                prefix={prefix}
+                ready={ready}
+                resourceOptions={resourceOptions}
+                setQuick={setQuick}
+              />
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-method`}>{t("remote.method")}</Label>
+                <Input
+                  id={`${prefix}-method`}
+                  list={`${prefix}-methods`}
+                  maxLength={80}
+                  placeholder={t("remote.methodExample")}
+                  required
+                  {...form.register("method")}
+                />
+                <datalist id={`${prefix}-methods`}>
+                  {["VPN", "RDP", "AnyDesk", "TeamViewer", "Supremo"].map((method) => (
+                    <option key={method} value={method} />
+                  ))}
+                </datalist>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-state`}
+                  label={t("mail.state")}
+                  onValueChange={(value) => {
+                    const parsed = RemoteConnectionInputSchema.shape.state.safeParse(value);
+                    if (parsed.success) {
+                      form.setValue("state", parsed.data);
+                    }
+                  }}
+                  options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
+                  placeholder={t("mail.choose")}
+                  value={v.state}
+                />
+              </div>
+            </div>
+            <SwitchField
+              checked={v.requiresVpn}
+              id={`${prefix}-vpn`}
+              label={t("remote.requiresVpn")}
+              onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
             />
-          </div>
-        </fieldset>
-        {fixed && <p className="text-sm text-muted-foreground">{t("remote.fixed")}</p>}
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("remote.errors.INVALID_REQUEST")}
-          </p>
-        )}
-        <RemoteFeedback error={mutation.error ?? assets.error ?? resources.error} />
-        <ContextHelp
-          description={t("remote.description")}
-          examples={t("remote.examples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("remote.guidance")}
-          scopeNote={t("remote.scope")}
-          title={t("remote.help")}
-        />
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                rows={3}
+                {...form.register("notes")}
+              />
+            </div>
+          </fieldset>
+          {fixed && <p className="text-sm text-muted-foreground">{t("remote.fixed")}</p>}
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("remote.errors.INVALID_REQUEST")}
+            </p>
+          )}
+          <RemoteFeedback error={mutation.error ?? assets.error ?? resources.error} />
+          <ContextHelp
+            description={t("remote.description")}
+            examples={t("remote.examples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("remote.guidance")}
+            scopeNote={t("remote.scope")}
+            title={t("remote.help")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/sites/shared/ui/site-form.tsx b/modules/companies/src/web/sites/shared/ui/site-form.tsx
index 2249f81..8a8357c 100644
--- a/modules/companies/src/web/sites/shared/ui/site-form.tsx
+++ b/modules/companies/src/web/sites/shared/ui/site-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
 import { Label } from "@repo/shadcn-ui/components/label";
@@ -17,30 +17,32 @@ export function SiteForm(props: SiteFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      {showTitle && <h3 className="text-lg font-semibold">{t(site ? "editSite" : "newSite")}</h3>}
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-        <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-address`}>{t("addressOptional")}</Label>
-        <Textarea
-          className="min-h-40"
-          id={`${id}-address`}
-          maxLength={10000}
-          rows={6}
-          {...form.register("address")}
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        {showTitle && <h3 className="text-lg font-semibold">{t(site ? "editSite" : "newSite")}</h3>}
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-name`}>{t("name")}</Label>
+          <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-address`}>{t("addressOptional")}</Label>
+          <Textarea
+            className="min-h-40"
+            id={`${id}-address`}
+            maxLength={10000}
+            rows={6}
+            {...form.register("address")}
+          />
+          <p className="text-xs text-muted-foreground">{t("addressHelp")}</p>
+        </div>
+        <CompanyFeedback
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
+          success={mutation.isSuccess}
         />
-        <p className="text-xs text-muted-foreground">{t("addressHelp")}</p>
-      </div>
-      <CompanyFeedback
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-        success={mutation.isSuccess}
-      />
 
-      <EntityHelp kind="site" />
+        <EntityHelp kind="site" />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/telework-authorizations/shared/ui/telework-authorization-form.tsx b/modules/companies/src/web/telework-authorizations/shared/ui/telework-authorization-form.tsx
index e521ce4..efbf6fe 100644
--- a/modules/companies/src/web/telework-authorizations/shared/ui/telework-authorization-form.tsx
+++ b/modules/companies/src/web/telework-authorizations/shared/ui/telework-authorization-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -23,79 +23,83 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-person`}>{t("telework.person")}</Label>
-            <SelectWithAction
-              action={fixed ? undefined : { label: t("newPerson"), onClick: () => setQuick(true) }}
-              disabled={fixed}
-              id={`${prefix}-person`}
-              label={t("telework.person")}
-              onValueChange={(value) => form.setValue("personId", value)}
-              options={company.people
-                .filter(
-                  (person) =>
-                    person.id === values.personId || (person.active && !reserved.has(person.id))
-                )
-                .map((person) => ({ value: person.id, label: person.name }))}
-              placeholder={t("mail.choose")}
-              required
-              value={values.personId}
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-person`}>{t("telework.person")}</Label>
+              <SelectWithAction
+                action={
+                  fixed ? undefined : { label: t("newPerson"), onClick: () => setQuick(true) }
+                }
+                disabled={fixed}
+                id={`${prefix}-person`}
+                label={t("telework.person")}
+                onValueChange={(value) => form.setValue("personId", value)}
+                options={company.people
+                  .filter(
+                    (person) =>
+                      person.id === values.personId || (person.active && !reserved.has(person.id))
+                  )
+                  .map((person) => ({ value: person.id, label: person.name }))}
+                placeholder={t("mail.choose")}
+                required
+                value={values.personId}
+              />
+            </div>
+            <SwitchField
+              checked={values.active}
+              id={`${prefix}-active`}
+              label={t("telework.active")}
+              onCheckedChange={(active) => form.setValue("active", active)}
             />
-          </div>
-          <SwitchField
-            checked={values.active}
-            id={`${prefix}-active`}
-            label={t("telework.active")}
-            onCheckedChange={(active) => form.setValue("active", active)}
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-start`}>{t("telework.startsOn")}</Label>
+                <Input
+                  id={`${prefix}-start`}
+                  onInput={(event) => form.setValue("startsOn", event.currentTarget.value || null)}
+                  type="date"
+                  value={values.startsOn ?? ""}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-end`}>{t("telework.expiresOn")}</Label>
+                <Input
+                  id={`${prefix}-end`}
+                  onInput={(event) => form.setValue("expiresOn", event.currentTarget.value || null)}
+                  type="date"
+                  value={values.expiresOn ?? ""}
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("telework.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                onChange={(event) => form.setValue("notes", event.target.value || null)}
+                rows={3}
+                value={values.notes ?? ""}
+              />
+            </div>
+          </fieldset>
+          {authorization && <p className="text-sm text-muted-foreground">{t("telework.fixed")}</p>}
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("telework.errors.INVALID_REQUEST")}
+            </p>
+          )}
+          <TeleworkFeedback error={mutation.error} />
+          <ContextHelp
+            description={t("telework.description")}
+            examples={t("telework.examples")}
+            examplesLabel={t("mail.examplesLabel")}
+            guidance={t("telework.guidance")}
+            scopeNote={t("telework.scope")}
+            title={t("telework.help")}
           />
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-start`}>{t("telework.startsOn")}</Label>
-              <Input
-                id={`${prefix}-start`}
-                onInput={(event) => form.setValue("startsOn", event.currentTarget.value || null)}
-                type="date"
-                value={values.startsOn ?? ""}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-end`}>{t("telework.expiresOn")}</Label>
-              <Input
-                id={`${prefix}-end`}
-                onInput={(event) => form.setValue("expiresOn", event.currentTarget.value || null)}
-                type="date"
-                value={values.expiresOn ?? ""}
-              />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("telework.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              onChange={(event) => form.setValue("notes", event.target.value || null)}
-              rows={3}
-              value={values.notes ?? ""}
-            />
-          </div>
-        </fieldset>
-        {authorization && <p className="text-sm text-muted-foreground">{t("telework.fixed")}</p>}
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("telework.errors.INVALID_REQUEST")}
-          </p>
-        )}
-        <TeleworkFeedback error={mutation.error} />
-        <ContextHelp
-          description={t("telework.description")}
-          examples={t("telework.examples")}
-          examplesLabel={t("mail.examplesLabel")}
-          guidance={t("telework.guidance")}
-          scopeNote={t("telework.scope")}
-          title={t("telework.help")}
-        />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/tickets/shared/ui/ticket-form.tsx b/modules/companies/src/web/tickets/shared/ui/ticket-form.tsx
index 5cde2b8..fe7d4f2 100644
--- a/modules/companies/src/web/tickets/shared/ui/ticket-form.tsx
+++ b/modules/companies/src/web/tickets/shared/ui/ticket-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -38,108 +38,110 @@ export function TicketForm(props: TicketFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={prefix}>{t("tickets.company")}</Label>
-            {scope || ticket ? (
-              <p>{data.companies.find((item) => item.id === companyId)?.name ?? companyId}</p>
-            ) : (
-              <>
-                <CompanySelect
-                  action={{ label: t("newCompany"), onClick: () => setQuick("company") }}
-                  id={prefix}
-                  label={t("tickets.company")}
-                  onValueChange={changeCompany}
-                  options={data.companies.map((item) => ({ value: item.id, label: item.name }))}
-                  placeholder={t("tickets.choose")}
-                  value={companyId}
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={mutation.isPending}>
+            <div className="space-y-2">
+              <Label htmlFor={prefix}>{t("tickets.company")}</Label>
+              {scope || ticket ? (
+                <p>{data.companies.find((item) => item.id === companyId)?.name ?? companyId}</p>
+              ) : (
+                <>
+                  <CompanySelect
+                    action={{ label: t("newCompany"), onClick: () => setQuick("company") }}
+                    id={prefix}
+                    label={t("tickets.company")}
+                    onValueChange={changeCompany}
+                    options={data.companies.map((item) => ({ value: item.id, label: item.name }))}
+                    placeholder={t("tickets.choose")}
+                    value={companyId}
+                  />
+                  <p className="text-xs text-muted-foreground">{t("tickets.companyNotice")}</p>
+                </>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-subject`}>{t("tickets.subject")}</Label>
+              <Input
+                id={`${prefix}-subject`}
+                maxLength={200}
+                required
+                {...form.register("subject")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-description`}>{t("tickets.description")}</Label>
+              <Textarea
+                id={`${prefix}-description`}
+                maxLength={10000}
+                {...form.register("description")}
+              />
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-requester`}>{t("tickets.requester")}</Label>
+                <SelectWithAction
+                  action={{
+                    label: t("newPerson"),
+                    onClick: () => setQuick("person"),
+                    disabled: !companyId,
+                  }}
+                  disabled={!lookups.data}
+                  id={`${prefix}-requester`}
+                  label={t("tickets.requester")}
+                  onValueChange={(id) => form.setValue("requesterId", id || null)}
+                  options={selectOptions(
+                    lookups.data?.people ?? [],
+                    ticket?.values.requesterId ?? null
+                  )}
+                  placeholder={t("tickets.unassigned")}
+                  value={values.requesterId ?? ""}
                 />
-                <p className="text-xs text-muted-foreground">{t("tickets.companyNotice")}</p>
-              </>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-assignee`}>{t("tickets.assignee")}</Label>
+                <SelectWithAction
+                  id={`${prefix}-assignee`}
+                  label={t("tickets.assignee")}
+                  onValueChange={(id) => form.setValue("assigneeId", id || null)}
+                  options={selectOptions(data.technicians, ticket?.values.assigneeId ?? null)}
+                  placeholder={t("tickets.unassigned")}
+                  value={values.assigneeId ?? ""}
+                />
+              </div>
+              <TicketClassificationFields form={form} prefix={prefix} />
+            </div>
+            {companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
+            {lookups.isError && (
+              <div role="alert">
+                <TicketFeedback error={lookups.error} />
+                <Button
+                  onClick={() => {
+                    lookups.refetch().catch(() => undefined);
+                  }}
+                  type="button"
+                  variant="outline"
+                >
+                  {t("retry")}
+                </Button>
+              </div>
             )}
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-subject`}>{t("tickets.subject")}</Label>
-            <Input
-              id={`${prefix}-subject`}
-              maxLength={200}
-              required
-              {...form.register("subject")}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-description`}>{t("tickets.description")}</Label>
-            <Textarea
-              id={`${prefix}-description`}
-              maxLength={10000}
-              {...form.register("description")}
-            />
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-requester`}>{t("tickets.requester")}</Label>
-              <SelectWithAction
-                action={{
-                  label: t("newPerson"),
-                  onClick: () => setQuick("person"),
-                  disabled: !companyId,
-                }}
-                disabled={!lookups.data}
-                id={`${prefix}-requester`}
-                label={t("tickets.requester")}
-                onValueChange={(id) => form.setValue("requesterId", id || null)}
-                options={selectOptions(
-                  lookups.data?.people ?? [],
-                  ticket?.values.requesterId ?? null
-                )}
-                placeholder={t("tickets.unassigned")}
-                value={values.requesterId ?? ""}
+            {lookups.data && (
+              <TicketTargets
+                companyId={companyId}
+                csrfToken={csrfToken}
+                lookups={lookups.data}
+                onChange={setTargets}
+                values={values.affected}
               />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-assignee`}>{t("tickets.assignee")}</Label>
-              <SelectWithAction
-                id={`${prefix}-assignee`}
-                label={t("tickets.assignee")}
-                onValueChange={(id) => form.setValue("assigneeId", id || null)}
-                options={selectOptions(data.technicians, ticket?.values.assigneeId ?? null)}
-                placeholder={t("tickets.unassigned")}
-                value={values.assigneeId ?? ""}
-              />
-            </div>
-            <TicketClassificationFields form={form} prefix={prefix} />
-          </div>
-          {companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
-          {lookups.isError && (
-            <div role="alert">
-              <TicketFeedback error={lookups.error} />
-              <Button
-                onClick={() => {
-                  lookups.refetch().catch(() => undefined);
-                }}
-                type="button"
-                variant="outline"
-              >
-                {t("retry")}
-              </Button>
-            </div>
-          )}
-          {lookups.data && (
-            <TicketTargets
-              companyId={companyId}
-              csrfToken={csrfToken}
-              lookups={lookups.data}
-              onChange={setTargets}
-              values={values.affected}
-            />
-          )}
-        </fieldset>
-        <TicketFeedback
-          error={mutation.error}
-          invalid={Object.keys(form.formState.errors).length > 0}
-        />
-        <TicketHelp />
+            )}
+          </fieldset>
+          <TicketFeedback
+            error={mutation.error}
+            invalid={Object.keys(form.formState.errors).length > 0}
+          />
+          <TicketHelp />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending || !companyId || !lookups.data} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/companies/src/web/work-profiles/shared/ui/work-profile-form.tsx b/modules/companies/src/web/work-profiles/shared/ui/work-profile-form.tsx
index f87dd44..19f84ca 100644
--- a/modules/companies/src/web/work-profiles/shared/ui/work-profile-form.tsx
+++ b/modules/companies/src/web/work-profiles/shared/ui/work-profile-form.tsx
@@ -1,5 +1,5 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -35,90 +35,92 @@ export function WorkProfileForm(props: WorkProfileFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-4" disabled={disabled}>
-          <div className="space-y-2">
-            <Label htmlFor={prefix}>{t("profiles.name")}</Label>
-            <Input id={prefix} maxLength={100} required {...form.register("name")} />
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            {selectors.map((selector) => {
-              const fixed = !!profile && selector.field !== "accountId";
-              return (
-                <div className="space-y-2" key={selector.field}>
-                  <Label htmlFor={`${prefix}-${selector.field}`}>
-                    {t(`profiles.${selector.label}`)}
-                  </Label>
-                  <SelectWithAction
-                    action={
-                      fixed || !allowQuickCreate
-                        ? undefined
-                        : {
-                            label: t(`mail.${selector.create}`),
-                            onClick: () => setQuick(selector.kind),
-                          }
-                    }
-                    disabled={disabled || fixed || !inventory.data || !access.data}
-                    id={`${prefix}-${selector.field}`}
-                    label={t(`profiles.${selector.label}`)}
-                    onValueChange={(id) =>
-                      form.setValue(
-                        selector.field,
-                        selector.field === "accountId" ? id || null : id
-                      )
-                    }
-                    options={selector.options}
-                    placeholder={t(
-                      selector.field === "accountId" ? "profiles.noAccount" : "profiles.choose"
-                    )}
-                    required={selector.field !== "accountId"}
-                    value={values[selector.field] ?? ""}
-                  />
-                </div>
-              );
-            })}
-          </div>
-          <p className="text-sm text-muted-foreground">{t("profiles.accountHint")}</p>
-          {values.personId && values.accountId && !authorized && allowQuickCreate && (
-            <div className="space-y-2 rounded-md border p-3 text-sm">
-              <p>{t("mail.noAuthorization")}</p>
-              <Button onClick={() => setQuick("authorization")} type="button" variant="outline">
-                {t("mail.authorize")}
-              </Button>
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-4" disabled={disabled}>
+            <div className="space-y-2">
+              <Label htmlFor={prefix}>{t("profiles.name")}</Label>
+              <Input id={prefix} maxLength={100} required {...form.register("name")} />
             </div>
-          )}
-          <SwitchField
-            checked={values.active}
-            id={`${prefix}-active`}
-            label={t("profiles.active")}
-            onCheckedChange={(active) => form.setValue("active", active)}
-          />
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("profiles.notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={4000}
-              onChange={(event) => form.setValue("notes", event.target.value || null)}
-              rows={3}
-              value={values.notes ?? ""}
+            <div className="grid gap-4 sm:grid-cols-2">
+              {selectors.map((selector) => {
+                const fixed = !!profile && selector.field !== "accountId";
+                return (
+                  <div className="space-y-2" key={selector.field}>
+                    <Label htmlFor={`${prefix}-${selector.field}`}>
+                      {t(`profiles.${selector.label}`)}
+                    </Label>
+                    <SelectWithAction
+                      action={
+                        fixed || !allowQuickCreate
+                          ? undefined
+                          : {
+                              label: t(`mail.${selector.create}`),
+                              onClick: () => setQuick(selector.kind),
+                            }
+                      }
+                      disabled={disabled || fixed || !inventory.data || !access.data}
+                      id={`${prefix}-${selector.field}`}
+                      label={t(`profiles.${selector.label}`)}
+                      onValueChange={(id) =>
+                        form.setValue(
+                          selector.field,
+                          selector.field === "accountId" ? id || null : id
+                        )
+                      }
+                      options={selector.options}
+                      placeholder={t(
+                        selector.field === "accountId" ? "profiles.noAccount" : "profiles.choose"
+                      )}
+                      required={selector.field !== "accountId"}
+                      value={values[selector.field] ?? ""}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+            <p className="text-sm text-muted-foreground">{t("profiles.accountHint")}</p>
+            {values.personId && values.accountId && !authorized && allowQuickCreate && (
+              <div className="space-y-2 rounded-md border p-3 text-sm">
+                <p>{t("mail.noAuthorization")}</p>
+                <Button onClick={() => setQuick("authorization")} type="button" variant="outline">
+                  {t("mail.authorize")}
+                </Button>
+              </div>
+            )}
+            <SwitchField
+              checked={values.active}
+              id={`${prefix}-active`}
+              label={t("profiles.active")}
+              onCheckedChange={(active) => form.setValue("active", active)}
             />
-          </div>
-        </fieldset>
-        {profile && <p className="text-sm text-muted-foreground">{t("profiles.fixed")}</p>}
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-destructive" role="alert">
-            {t("profiles.errors.INVALID_REQUEST")}
-          </p>
-        )}
-        <ProfileFeedback error={mutation.error ?? access.error ?? inventory.error} />
-        <ContextHelp
-          description={t("profiles.description")}
-          examples={t("profiles.examples")}
-          examplesLabel={t("profiles.examplesLabel")}
-          guidance={t("profiles.guidance")}
-          scopeNote={t("profiles.scope")}
-          title={t("profiles.help")}
-        />
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("profiles.notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={4000}
+                onChange={(event) => form.setValue("notes", event.target.value || null)}
+                rows={3}
+                value={values.notes ?? ""}
+              />
+            </div>
+          </fieldset>
+          {profile && <p className="text-sm text-muted-foreground">{t("profiles.fixed")}</p>}
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-destructive" role="alert">
+              {t("profiles.errors.INVALID_REQUEST")}
+            </p>
+          )}
+          <ProfileFeedback error={mutation.error ?? access.error ?? inventory.error} />
+          <ContextHelp
+            description={t("profiles.description")}
+            examples={t("profiles.examples")}
+            examplesLabel={t("profiles.examplesLabel")}
+            guidance={t("profiles.guidance")}
+            scopeNote={t("profiles.scope")}
+            title={t("profiles.help")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={disabled || !inventory.data || !access.data} type="submit">
             {t(disabled ? "saving" : "save")}
diff --git a/modules/identity/src/web/passwords/shared/ui/password-form.tsx b/modules/identity/src/web/passwords/shared/ui/password-form.tsx
index d4f88d3..5319fd5 100644
--- a/modules/identity/src/web/passwords/shared/ui/password-form.tsx
+++ b/modules/identity/src/web/passwords/shared/ui/password-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
 import { Label } from "@repo/shadcn-ui/components/label";
@@ -15,47 +15,49 @@ export function PasswordForm(props: PasswordFormProps) {
   const { t } = useTranslation("identity");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      {showTitle && (
-        <h3 className="font-semibold">
-          {t(target ? "resetPassword" : "changePassword")}
-          {target ? ` · ${target.name}` : ""}
-        </h3>
-      )}
-      {!showTitle && target && <p className="text-muted-foreground">{target.name}</p>}
-      {!target && (
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        {showTitle && (
+          <h3 className="font-semibold">
+            {t(target ? "resetPassword" : "changePassword")}
+            {target ? ` · ${target.name}` : ""}
+          </h3>
+        )}
+        {!showTitle && target && <p className="text-muted-foreground">{target.name}</p>}
+        {!target && (
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-current`}>{t("currentPassword")}</Label>
+            <Input
+              autoComplete="current-password"
+              id={`${id}-current`}
+              maxLength={128}
+              required
+              type="password"
+              {...form.register("currentPassword")}
+            />
+          </div>
+        )}
         <div className="space-y-2">
-          <Label htmlFor={`${id}-current`}>{t("currentPassword")}</Label>
+          <Label htmlFor={`${id}-new`}>{t("newPassword")}</Label>
           <Input
-            autoComplete="current-password"
-            id={`${id}-current`}
+            autoComplete="new-password"
+            id={`${id}-new`}
             maxLength={128}
+            minLength={8}
             required
             type="password"
-            {...form.register("currentPassword")}
+            {...form.register("password")}
           />
+          <p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
         </div>
-      )}
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-new`}>{t("newPassword")}</Label>
-        <Input
-          autoComplete="new-password"
-          id={`${id}-new`}
-          maxLength={128}
-          minLength={8}
-          required
-          type="password"
-          {...form.register("password")}
-        />
-        <p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
-      </div>
-      {target && <p className="text-sm text-muted-foreground">{t("resetHelp")}</p>}
-      {Object.keys(form.formState.errors).length > 0 && (
-        <p className="text-sm text-destructive" role="alert">
-          {t("invalidForm")}
-        </p>
-      )}
-      <FormFeedback error={mutation.error} success={mutation.isSuccess} />
+        {target && <p className="text-sm text-muted-foreground">{t("resetHelp")}</p>}
+        {Object.keys(form.formState.errors).length > 0 && (
+          <p className="text-sm text-destructive" role="alert">
+            {t("invalidForm")}
+          </p>
+        )}
+        <FormFeedback error={mutation.error} success={mutation.isSuccess} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/identity/src/web/users/shared/ui/user-editor-dialog.tsx b/modules/identity/src/web/users/shared/ui/user-editor-dialog.tsx
index 8e9e74f..e106584 100644
--- a/modules/identity/src/web/users/shared/ui/user-editor-dialog.tsx
+++ b/modules/identity/src/web/users/shared/ui/user-editor-dialog.tsx
@@ -24,6 +24,7 @@ export function UserEditorDialog(
         }
       }}
       open={props.open}
+      size="medium"
       title={t(
         props.mode === "create"
           ? "createUser"
diff --git a/modules/identity/src/web/users/shared/ui/user-form.tsx b/modules/identity/src/web/users/shared/ui/user-form.tsx
index 5bd7d59..da080ab 100644
--- a/modules/identity/src/web/users/shared/ui/user-form.tsx
+++ b/modules/identity/src/web/users/shared/ui/user-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SwitchField } from "@repo/rdx-ui/components/switch-field";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -16,62 +16,64 @@ export function UserForm(props: UserFormProps) {
   const { t } = useTranslation("identity");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      {showTitle && <h3 className="font-semibold">{t(user ? "editUser" : "createUser")}</h3>}
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-        <Input
-          autoComplete="name"
-          id={`${id}-name`}
-          maxLength={100}
-          required
-          {...form.register("name")}
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-email`}>{t("email")}</Label>
-        <Input
-          autoComplete="off"
-          id={`${id}-email`}
-          maxLength={254}
-          required
-          type="email"
-          {...form.register("email")}
-        />
-      </div>
-      {!user && (
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
+        {showTitle && <h3 className="font-semibold">{t(user ? "editUser" : "createUser")}</h3>}
         <div className="space-y-2">
-          <Label htmlFor={`${id}-password`}>{t("password")}</Label>
+          <Label htmlFor={`${id}-name`}>{t("name")}</Label>
           <Input
-            autoComplete="new-password"
-            id={`${id}-password`}
-            maxLength={128}
-            minLength={8}
+            autoComplete="name"
+            id={`${id}-name`}
+            maxLength={100}
             required
-            type="password"
-            {...form.register("password")}
+            {...form.register("name")}
           />
-          <p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
         </div>
-      )}
-      {user && (
-        <SwitchField
-          checked={form.watch("active")}
-          disabled={user.isInitialAdmin}
-          id={`${id}-active`}
-          label={t("active")}
-          onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
-        />
-      )}
-      {user?.isInitialAdmin && (
-        <p className="text-xs text-muted-foreground">{t("adminProtected")}</p>
-      )}
-      {Object.keys(form.formState.errors).length > 0 && (
-        <p className="text-sm text-destructive" role="alert">
-          {t("invalidForm")}
-        </p>
-      )}
-      <FormFeedback error={mutation.error} success={mutation.isSuccess} />
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-email`}>{t("email")}</Label>
+          <Input
+            autoComplete="off"
+            id={`${id}-email`}
+            maxLength={254}
+            required
+            type="email"
+            {...form.register("email")}
+          />
+        </div>
+        {!user && (
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-password`}>{t("password")}</Label>
+            <Input
+              autoComplete="new-password"
+              id={`${id}-password`}
+              maxLength={128}
+              minLength={8}
+              required
+              type="password"
+              {...form.register("password")}
+            />
+            <p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
+          </div>
+        )}
+        {user && (
+          <SwitchField
+            checked={form.watch("active")}
+            disabled={user.isInitialAdmin}
+            id={`${id}-active`}
+            label={t("active")}
+            onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
+          />
+        )}
+        {user?.isInitialAdmin && (
+          <p className="text-xs text-muted-foreground">{t("adminProtected")}</p>
+        )}
+        {Object.keys(form.formState.errors).length > 0 && (
+          <p className="text-sm text-destructive" role="alert">
+            {t("invalidForm")}
+          </p>
+        )}
+        <FormFeedback error={mutation.error} success={mutation.isSuccess} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/resources/src/common/locales/en.json b/modules/resources/src/common/locales/en.json
index 95dc34d..e343b00 100644
--- a/modules/resources/src/common/locales/en.json
+++ b/modules/resources/src/common/locales/en.json
@@ -152,5 +152,9 @@
     "assign": "Section",
     "help": "Organize fields without changing their values or requirements. Removing a section moves its fields to Unsectioned.",
     "empty": "This section has no fields yet."
+  },
+  "formLayout": {
+    "identity": "Resource identification",
+    "template": "Template details"
   }
 }
diff --git a/modules/resources/src/common/locales/es.json b/modules/resources/src/common/locales/es.json
index 91dfccd..253d30e 100644
--- a/modules/resources/src/common/locales/es.json
+++ b/modules/resources/src/common/locales/es.json
@@ -152,5 +152,9 @@
     "assign": "Sección",
     "help": "Organiza los campos sin cambiar sus valores ni su obligatoriedad. Al eliminar una sección, sus campos pasan a «Sin sección».",
     "empty": "Esta sección aún no tiene campos."
+  },
+  "formLayout": {
+    "identity": "Identificación del recurso",
+    "template": "Datos de la plantilla"
   }
 }
diff --git a/modules/resources/src/web/catalog-fields/shared/ui/catalog-form.tsx b/modules/resources/src/web/catalog-fields/shared/ui/catalog-form.tsx
index b0ee649..3512200 100644
--- a/modules/resources/src/web/catalog-fields/shared/ui/catalog-form.tsx
+++ b/modules/resources/src/web/catalog-fields/shared/ui/catalog-form.tsx
@@ -1,4 +1,4 @@
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -19,54 +19,56 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
   const { t } = useTranslation("resources");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-        <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-type`}>{t("type")}</Label>
-        <SelectWithAction
-          disabled={!!item || mutation.isPending}
-          id={`${id}-type`}
-          label={t("type")}
-          onValueChange={(value) => {
-            const parsed = FieldTypeSchema.safeParse(value);
-            if (parsed.success) {
-              form.setValue("type", parsed.data);
-            }
-          }}
-          options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
-          placeholder={t("chooseType")}
-          required
-          value={type}
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
-        <Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
-      </div>
-      {type === "choice" && (
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
         <div className="space-y-2">
-          <Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
-          <Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
-          <p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
+          <Label htmlFor={`${id}-name`}>{t("name")}</Label>
+          <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
         </div>
-      )}
-      <div className="space-y-2">
-        <Label htmlFor={`${id}-description`}>{t("description")}</Label>
-        <Textarea
-          id={`${id}-description`}
-          maxLength={1000}
-          rows={3}
-          {...form.register("description")}
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-type`}>{t("type")}</Label>
+          <SelectWithAction
+            disabled={!!item || mutation.isPending}
+            id={`${id}-type`}
+            label={t("type")}
+            onValueChange={(value) => {
+              const parsed = FieldTypeSchema.safeParse(value);
+              if (parsed.success) {
+                form.setValue("type", parsed.data);
+              }
+            }}
+            options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
+            placeholder={t("chooseType")}
+            required
+            value={type}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
+          <Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
+        </div>
+        {type === "choice" && (
+          <div className="space-y-2">
+            <Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
+            <Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
+            <p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
+          </div>
+        )}
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-description`}>{t("description")}</Label>
+          <Textarea
+            id={`${id}-description`}
+            maxLength={1000}
+            rows={3}
+            {...form.register("description")}
+          />
+        </div>
+        <CatalogError
+          error={mutation.error}
+          invalid={Object.keys(form.formState.errors).length > 0}
         />
-      </div>
-      <CatalogError
-        error={mutation.error}
-        invalid={Object.keys(form.formState.errors).length > 0}
-      />
-      <CatalogHelp kind="field" scope={scope} />
+        <CatalogHelp kind="field" scope={scope} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/resources/src/web/catalog-templates/shared/ui/catalog-template-form.tsx b/modules/resources/src/web/catalog-templates/shared/ui/catalog-template-form.tsx
index ed97369..6f0bc57 100644
--- a/modules/resources/src/web/catalog-templates/shared/ui/catalog-template-form.tsx
+++ b/modules/resources/src/web/catalog-templates/shared/ui/catalog-template-form.tsx
@@ -1,5 +1,6 @@
 import { UniqueID } from "@repo/rdx-ddd";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
+import { FormSection } from "@repo/rdx-ui/components/form-section";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { TemplateSectionsEditor } from "@repo/rdx-ui/components/template-sections-editor";
 import { Button } from "@repo/shadcn-ui/components/button";
@@ -23,108 +24,112 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
-        <div className="grid gap-4 sm:grid-cols-2">
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <FormSection title={t("formLayout.template")}>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor={`${id}-name`}>{t("name")}</Label>
+                <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`${id}-description`}>{t("description")}</Label>
+                <Textarea
+                  id={`${id}-description`}
+                  maxLength={1000}
+                  rows={2}
+                  {...form.register("description")}
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${id}-usage`}>{t("templateUsage")}</Label>
+              <SelectWithAction
+                disabled={!!item || mutation.isPending}
+                id={`${id}-usage`}
+                label={t("templateUsage")}
+                onValueChange={(value) => {
+                  if (value === "application" || value === "certificate") {
+                    form.setValue("usage", value);
+                  } else {
+                    form.setValue("usage", undefined);
+                  }
+                }}
+                options={["general", "application", "certificate"].map((value) => ({
+                  value,
+                  label: t(`usage.${value}`),
+                }))}
+                placeholder={t("choose")}
+                value={form.watch("usage") ?? "general"}
+              />
+              <p className="text-xs text-muted-foreground">{t("templateUsageHelp")}</p>
+            </div>
+          </FormSection>
           <div className="space-y-2">
-            <Label htmlFor={`${id}-name`}>{t("name")}</Label>
-            <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${id}-description`}>{t("description")}</Label>
-            <Textarea
-              id={`${id}-description`}
-              maxLength={1000}
-              rows={2}
-              {...form.register("description")}
+            <Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
+            <SelectWithAction
+              action={
+                allowQuickCreate
+                  ? { label: t("addField"), onClick: () => setCreatingField(true) }
+                  : undefined
+              }
+              disabled={mutation.isPending}
+              id={`${id}-field`}
+              label={t("selectField")}
+              onValueChange={add}
+              options={fields
+                .filter(
+                  (entry) =>
+                    entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
+                )
+                .map((entry) => ({ value: entry.id, label: entry.values.name }))}
+              placeholder={t("choose")}
+              value=""
             />
           </div>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-usage`}>{t("templateUsage")}</Label>
-          <SelectWithAction
-            disabled={!!item || mutation.isPending}
-            id={`${id}-usage`}
-            label={t("templateUsage")}
-            onValueChange={(value) => {
-              if (value === "application" || value === "certificate") {
-                form.setValue("usage", value);
-              } else {
-                form.setValue("usage", undefined);
-              }
-            }}
-            options={["general", "application", "certificate"].map((value) => ({
-              value,
-              label: t(`usage.${value}`),
-            }))}
-            placeholder={t("choose")}
-            value={form.watch("usage") ?? "general"}
-          />
-          <p className="text-xs text-muted-foreground">{t("templateUsageHelp")}</p>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
-          <SelectWithAction
-            action={
-              allowQuickCreate
-                ? { label: t("addField"), onClick: () => setCreatingField(true) }
-                : undefined
-            }
+          {!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
+          <TemplateSectionsEditor
+            createId={() => UniqueID.generateNewID().toPrimitive()}
             disabled={mutation.isPending}
-            id={`${id}-field`}
-            label={t("selectField")}
-            onValueChange={add}
-            options={fields
-              .filter(
-                (entry) =>
-                  entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
-              )
-              .map((entry) => ({ value: entry.id, label: entry.values.name }))}
-            placeholder={t("choose")}
-            value=""
+            fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
+            fieldNotes={Object.fromEntries(
+              fields
+                .filter((field) => !field.effectiveActive)
+                .map((field) => [field.id, t("disabledField")])
+            )}
+            fields={selected}
+            labels={{
+              title: t("sections.title"),
+              add: t("sections.add"),
+              name: t("sections.name"),
+              description: t("sections.description"),
+              ungrouped: t("sections.ungrouped"),
+              moveUp: t("sections.moveUp"),
+              moveDown: t("sections.moveDown"),
+              remove: t("sections.remove"),
+              removeField: t("sections.removeField"),
+              required: t("sections.required"),
+              assign: t("sections.assign"),
+              help: t("sections.help"),
+              empty: t("sections.empty"),
+            }}
+            onChange={({ sections, fields: next }) => {
+              form.setValue("sections", sections, { shouldDirty: true });
+              form.setValue("fields", next, { shouldDirty: true });
+            }}
+            sections={form.watch("sections") ?? []}
           />
-        </div>
-        {!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
-        <TemplateSectionsEditor
-          createId={() => UniqueID.generateNewID().toPrimitive()}
-          disabled={mutation.isPending}
-          fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
-          fieldNotes={Object.fromEntries(
-            fields
-              .filter((field) => !field.effectiveActive)
-              .map((field) => [field.id, t("disabledField")])
+          {form.formState.errors.sections && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("errors.INVALID_SECTIONS")}
+            </p>
           )}
-          fields={selected}
-          labels={{
-            title: t("sections.title"),
-            add: t("sections.add"),
-            name: t("sections.name"),
-            description: t("sections.description"),
-            ungrouped: t("sections.ungrouped"),
-            moveUp: t("sections.moveUp"),
-            moveDown: t("sections.moveDown"),
-            remove: t("sections.remove"),
-            removeField: t("sections.removeField"),
-            required: t("sections.required"),
-            assign: t("sections.assign"),
-            help: t("sections.help"),
-            empty: t("sections.empty"),
-          }}
-          onChange={({ sections, fields: next }) => {
-            form.setValue("sections", sections, { shouldDirty: true });
-            form.setValue("fields", next, { shouldDirty: true });
-          }}
-          sections={form.watch("sections") ?? []}
-        />
-        {form.formState.errors.sections && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("errors.INVALID_SECTIONS")}
-          </p>
-        )}
-        <CatalogError
-          error={mutation.error}
-          invalid={Object.keys(form.formState.errors).length > 0}
-        />
-        <CatalogHelp kind="template" scope={scope} />
+          <CatalogError
+            error={mutation.error}
+            invalid={Object.keys(form.formState.errors).length > 0}
+          />
+          <CatalogHelp kind="template" scope={scope} />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/modules/resources/src/web/resources/shared/ui/resource-form.tsx b/modules/resources/src/web/resources/shared/ui/resource-form.tsx
index bf259d3..ec22544 100644
--- a/modules/resources/src/web/resources/shared/ui/resource-form.tsx
+++ b/modules/resources/src/web/resources/shared/ui/resource-form.tsx
@@ -1,6 +1,7 @@
 import { ContextHelp } from "@repo/rdx-ui/components/context-help";
 import { FieldSections } from "@repo/rdx-ui/components/field-sections";
-import { FormActions } from "@repo/rdx-ui/components/form-dialog";
+import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
+import { FormSection } from "@repo/rdx-ui/components/form-section";
 import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
 import { Button } from "@repo/shadcn-ui/components/button";
 import { Input } from "@repo/shadcn-ui/components/input";
@@ -42,111 +43,115 @@ export function ResourceForm(props: ResourceFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
-        <fieldset className="space-y-5" disabled={mutation.isPending}>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
-            <Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
-              <SelectWithAction
-                action={
-                  resource || !allowQuickCreate
-                    ? undefined
-                    : { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
-                }
-                disabled={!!resource || mutation.isPending}
-                id={`${prefix}-template`}
-                label={t("template")}
-                onValueChange={selectTemplate}
-                options={
-                  resource
-                    ? [
-                        {
-                          value: resource.values.templateId,
-                          label: resource.specification.templateName,
-                        },
-                      ]
-                    : templates.map((item) => ({ value: item.id, label: item.values.name }))
-                }
-                placeholder={t("chooseValue")}
-                required
-                value={values.templateId}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
-              <SelectWithAction
-                disabled={mutation.isPending}
-                id={`${prefix}-status`}
-                label={t("status")}
-                onValueChange={changeStatus}
-                options={["active", "inactive"].map((value) => ({ value, label: t(value) }))}
-                placeholder={t("chooseValue")}
-                required
-                value={values.active ? "active" : "inactive"}
-              />
-            </div>
-          </div>
-          <ResourceIntegrationFields
-            fixed={!!resource}
-            integration={values.integration}
-            items={items}
-            onChange={(integration) =>
-              form.setValue("integration", integration, { shouldDirty: true })
-            }
-            references={referenceQuery.data?.references ?? []}
-            templateKey={template?.builtinKey}
-          />
-          {fields.length > 0 && (
-            <section className="space-y-3">
-              <h3 className="font-medium">{t("characteristics")}</h3>
-              <FieldSections
-                hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
-                items={fields}
-                renderItem={(field) => (
-                  <ResourceCharacteristicControl
-                    disabled={mutation.isPending}
-                    field={requireMailboxAddress(field, items, values, template)}
-                    key={field.fieldId}
-                    onChange={(value) => setCharacteristic(field.fieldId, value)}
-                    prefix={prefix}
-                    value={values.characteristics[field.fieldId]}
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
+          <fieldset className="space-y-5" disabled={mutation.isPending}>
+            <FormSection title={t("formLayout.identity")}>
+              <div className="space-y-2">
+                <Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
+                <Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
+                  <SelectWithAction
+                    action={
+                      resource || !allowQuickCreate
+                        ? undefined
+                        : { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
+                    }
+                    disabled={!!resource || mutation.isPending}
+                    id={`${prefix}-template`}
+                    label={t("template")}
+                    onValueChange={selectTemplate}
+                    options={
+                      resource
+                        ? [
+                            {
+                              value: resource.values.templateId,
+                              label: resource.specification.templateName,
+                            },
+                          ]
+                        : templates.map((item) => ({ value: item.id, label: item.values.name }))
+                    }
+                    placeholder={t("chooseValue")}
+                    required
+                    value={values.templateId}
                   />
-                )}
-                sections={sections}
-                ungroupedLabel={t("sections.ungrouped")}
-              />
-            </section>
-          )}
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
-            <Textarea
-              id={`${prefix}-notes`}
-              maxLength={
-                values.integration || template?.builtinKey === "template:mailbox" ? 4000 : 10000
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
+                  <SelectWithAction
+                    disabled={mutation.isPending}
+                    id={`${prefix}-status`}
+                    label={t("status")}
+                    onValueChange={changeStatus}
+                    options={["active", "inactive"].map((value) => ({ value, label: t(value) }))}
+                    placeholder={t("chooseValue")}
+                    required
+                    value={values.active ? "active" : "inactive"}
+                  />
+                </div>
+              </div>
+            </FormSection>
+            <ResourceIntegrationFields
+              fixed={!!resource}
+              integration={values.integration}
+              items={items}
+              onChange={(integration) =>
+                form.setValue("integration", integration, { shouldDirty: true })
               }
-              rows={3}
-              {...form.register("notes")}
+              references={referenceQuery.data?.references ?? []}
+              templateKey={template?.builtinKey}
             />
-          </div>
-        </fieldset>
-        {Object.keys(form.formState.errors).length > 0 && (
-          <p className="text-sm text-destructive" role="alert">
-            {t("inventoryErrors.INVALID_REQUEST")}
-          </p>
-        )}
-        <InventoryFeedback error={mutation.error ?? referenceQuery.error} />
-        <ContextHelp
-          description={t(`${helpPrefix}Description`)}
-          examples={t(`${helpPrefix}Examples`)}
-          examplesLabel={t("examplesLabel")}
-          guidance={t(`${helpPrefix}Guidance`)}
-          scopeNote={t(`${helpPrefix}Scope`)}
-          title={t("helpTitle")}
-        />
+            {fields.length > 0 && (
+              <section className="space-y-3">
+                <h3 className="font-medium">{t("characteristics")}</h3>
+                <FieldSections
+                  hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
+                  items={fields}
+                  renderItem={(field) => (
+                    <ResourceCharacteristicControl
+                      disabled={mutation.isPending}
+                      field={requireMailboxAddress(field, items, values, template)}
+                      key={field.fieldId}
+                      onChange={(value) => setCharacteristic(field.fieldId, value)}
+                      prefix={prefix}
+                      value={values.characteristics[field.fieldId]}
+                    />
+                  )}
+                  sections={sections}
+                  ungroupedLabel={t("sections.ungrouped")}
+                />
+              </section>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
+              <Textarea
+                id={`${prefix}-notes`}
+                maxLength={
+                  values.integration || template?.builtinKey === "template:mailbox" ? 4000 : 10000
+                }
+                rows={3}
+                {...form.register("notes")}
+              />
+            </div>
+          </fieldset>
+          {Object.keys(form.formState.errors).length > 0 && (
+            <p className="text-sm text-destructive" role="alert">
+              {t("inventoryErrors.INVALID_REQUEST")}
+            </p>
+          )}
+          <InventoryFeedback error={mutation.error ?? referenceQuery.error} />
+          <ContextHelp
+            description={t(`${helpPrefix}Description`)}
+            examples={t(`${helpPrefix}Examples`)}
+            examplesLabel={t("examplesLabel")}
+            guidance={t(`${helpPrefix}Guidance`)}
+            scopeNote={t(`${helpPrefix}Scope`)}
+            title={t("helpTitle")}
+          />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}
diff --git a/packages/rdx-ui/src/components/field-sections.tsx b/packages/rdx-ui/src/components/field-sections.tsx
index b90db6e..68188a5 100644
--- a/packages/rdx-ui/src/components/field-sections.tsx
+++ b/packages/rdx-ui/src/components/field-sections.tsx
@@ -29,9 +29,13 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
   }, [hasErrors]);
   const content = (fields: readonly T[]) =>
     values ? (
-      <dl className="grid gap-4 sm:grid-cols-2">{fields.map(renderItem)}</dl>
+      <dl className="grid gap-4 sm:grid-cols-2 @min-[900px]:grid-cols-3">
+        {fields.map(renderItem)}
+      </dl>
     ) : (
-      <div className="grid gap-4 sm:grid-cols-2">{fields.map(renderItem)}</div>
+      <div className="grid gap-4 sm:grid-cols-2 @min-[900px]:grid-cols-3">
+        {fields.map(renderItem)}
+      </div>
     );
   if (!sections.length) {
     return content(items);
@@ -40,7 +44,7 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
   const ungrouped = items.filter((item) => !(item.sectionId && known.has(item.sectionId)));
   return (
     <div
-      className="space-y-3"
+      className="grid items-start gap-4 @min-[900px]:grid-cols-2"
       onInvalidCapture={(event) => {
         // Abrir antes de que el navegador intente enfocar un control inválido oculto.
         if (event.target instanceof HTMLElement) {
@@ -58,7 +62,7 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
           return null;
         }
         return (
-          <details className="rounded-md border" key={section.id} open>
+          <details className="@container rounded-md border" key={section.id} open>
             <summary className="cursor-pointer rounded-md px-4 py-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-ring">
               {section.name}
             </summary>
@@ -72,7 +76,7 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
         );
       })}
       {ungrouped.length > 0 && (
-        <section className="space-y-3">
+        <section className="col-span-full space-y-3">
           <h4 className="text-sm font-medium">{ungroupedLabel}</h4>
           {content(ungrouped)}
         </section>
diff --git a/packages/rdx-ui/src/components/form-dialog.tsx b/packages/rdx-ui/src/components/form-dialog.tsx
index 8060f69..41e1831 100644
--- a/packages/rdx-ui/src/components/form-dialog.tsx
+++ b/packages/rdx-ui/src/components/form-dialog.tsx
@@ -18,6 +18,7 @@ export function FormDialog({
   cancelLabel,
   children,
   wide = false,
+  size,
   formActions = false,
 }: {
   open: boolean;
@@ -26,28 +27,39 @@ export function FormDialog({
   cancelLabel: string;
   children: ReactNode;
   wide?: boolean;
+  size?: "small" | "medium" | "large";
   formActions?: boolean;
 }) {
+  const width = size ?? (wide ? "large" : "small");
+  const widths = {
+    small: "sm:max-w-xl",
+    medium: "sm:max-w-3xl",
+    large: "sm:w-[90vw] sm:max-w-[1200px]",
+  };
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent
-        className={`max-h-[calc(100dvh-2rem)] overflow-y-auto ${wide ? "sm:max-w-3xl" : "sm:max-w-xl"}`}
+        className={`flex max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden p-0 ${widths[width]}`}
         showCloseButton={true}
       >
-        <DialogHeader>
+        <DialogHeader className="shrink-0 border-b px-6 py-5 pr-14">
           <DialogTitle className="text-lg font-bold">{title}</DialogTitle>
         </DialogHeader>
-        <FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
-          {children}
-        </FormCancelContext.Provider>
+        <div
+          className="@container flex min-h-0 flex-1 flex-col overflow-y-auto px-6 pt-5 pb-5 [&:has([data-slot=form-body])]:overflow-hidden [&:has([data-slot=form-body])]:pb-0"
+          data-slot="form-dialog-content"
+        >
+          <FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
+            {children}
+          </FormCancelContext.Provider>
+        </div>
         {!formActions && (
-          <DialogFooter>
+          <DialogFooter className="shrink-0 border-t px-6 py-4">
             <DialogClose render={<Button type="button" variant="outline" />}>
               {cancelLabel}
             </DialogClose>
           </DialogFooter>
         )}
-
       </DialogContent>
     </Dialog>
   );
@@ -56,7 +68,7 @@ export function FormDialog({
 export function FormActions({ children }: { children: ReactNode }) {
   const cancelLabel = useContext(FormCancelContext);
   return (
-    <DialogFooter className="border-t pt-4">      
+    <DialogFooter className="shrink-0 border-t bg-popover py-4">
       {cancelLabel && (
         <DialogClose render={<Button type="button" variant="outline" />}>{cancelLabel}</DialogClose>
       )}
@@ -64,3 +76,12 @@ export function FormActions({ children }: { children: ReactNode }) {
     </DialogFooter>
   );
 }
+
+/** El cuerpo se desplaza dentro del formulario; las acciones conservan su submit nativo. */
+export function FormBody({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-0 flex-1 space-y-5 overflow-y-auto pb-5 pr-1" data-slot="form-body">
+      {children}
+    </div>
+  );
+}
diff --git a/packages/rdx-ui/src/components/form-section.tsx b/packages/rdx-ui/src/components/form-section.tsx
new file mode 100644
index 0000000..799a4eb
--- /dev/null
+++ b/packages/rdx-ui/src/components/form-section.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { useId } from "react";
+
+/** Bloque visual reutilizable con título accesible; no altera validación ni datos. */
+export function FormSection({ title, children }: { title: string; children: ReactNode }) {
+  const id = useId();
+  return (
+    <section aria-labelledby={id} className="space-y-4 rounded-lg border p-4">
+      <h3 className="text-sm font-semibold" id={id}>
+        {title}
+      </h3>
+      {children}
+    </section>
+  );
+}
diff --git a/packages/rdx-ui/src/components/template-sections-editor.tsx b/packages/rdx-ui/src/components/template-sections-editor.tsx
index 480c414..a757a25 100644
--- a/packages/rdx-ui/src/components/template-sections-editor.tsx
+++ b/packages/rdx-ui/src/components/template-sections-editor.tsx
@@ -87,76 +87,82 @@ export function TemplateSectionsEditor({
         </Button>
       </div>
       <p className="text-xs text-muted-foreground">{labels.help}</p>
-      {sections.map((section, index) => (
-        <fieldset className="space-y-3 rounded-md border p-3" disabled={disabled} key={section.id}>
-          <legend className="sr-only">{section.name || labels.name}</legend>
-          <div className="flex items-end gap-2">
-            <div className="min-w-0 flex-1 space-y-2">
-              <Label htmlFor={`${prefix}-${section.id}-name`}>{labels.name}</Label>
-              <Input
-                id={`${prefix}-${section.id}-name`}
-                maxLength={100}
+      <div className="grid items-start gap-4 @min-[900px]:grid-cols-2">
+        {sections.map((section, index) => (
+          <fieldset
+            className="space-y-3 rounded-md border p-3"
+            disabled={disabled}
+            key={section.id}
+          >
+            <legend className="sr-only">{section.name || labels.name}</legend>
+            <div className="flex items-end gap-2">
+              <div className="min-w-0 flex-1 space-y-2">
+                <Label htmlFor={`${prefix}-${section.id}-name`}>{labels.name}</Label>
+                <Input
+                  id={`${prefix}-${section.id}-name`}
+                  maxLength={100}
+                  onChange={(event) =>
+                    saveSections(
+                      sections.map((item) =>
+                        item.id === section.id ? { ...item, name: event.target.value } : item
+                      )
+                    )
+                  }
+                  required
+                  value={section.name}
+                />
+              </div>
+              <Button
+                aria-label={`${labels.moveUp}: ${section.name}`}
+                disabled={disabled || index === 0}
+                onClick={() => moveSection(index, -1)}
+                size="icon-sm"
+                type="button"
+                variant="ghost"
+              >
+                <ArrowUpIcon />
+              </Button>
+              <Button
+                aria-label={`${labels.moveDown}: ${section.name}`}
+                disabled={disabled || index === sections.length - 1}
+                onClick={() => moveSection(index, 1)}
+                size="icon-sm"
+                type="button"
+                variant="ghost"
+              >
+                <ArrowDownIcon />
+              </Button>
+              <Button
+                aria-label={`${labels.remove}: ${section.name}`}
+                disabled={disabled}
+                onClick={() => removeSection(section.id)}
+                size="icon-sm"
+                type="button"
+                variant="ghost"
+              >
+                <Trash2Icon />
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${prefix}-${section.id}-description`}>{labels.description}</Label>
+              <Textarea
+                id={`${prefix}-${section.id}-description`}
+                maxLength={1000}
                 onChange={(event) =>
                   saveSections(
                     sections.map((item) =>
-                      item.id === section.id ? { ...item, name: event.target.value } : item
+                      item.id === section.id ? { ...item, description: event.target.value } : item
                     )
                   )
                 }
-                required
-                value={section.name}
+                rows={2}
+                value={section.description}
               />
             </div>
-            <Button
-              aria-label={`${labels.moveUp}: ${section.name}`}
-              disabled={disabled || index === 0}
-              onClick={() => moveSection(index, -1)}
-              size="icon-sm"
-              type="button"
-              variant="ghost"
-            >
-              <ArrowUpIcon />
-            </Button>
-            <Button
-              aria-label={`${labels.moveDown}: ${section.name}`}
-              disabled={disabled || index === sections.length - 1}
-              onClick={() => moveSection(index, 1)}
-              size="icon-sm"
-              type="button"
-              variant="ghost"
-            >
-              <ArrowDownIcon />
-            </Button>
-            <Button
-              aria-label={`${labels.remove}: ${section.name}`}
-              disabled={disabled}
-              onClick={() => removeSection(section.id)}
-              size="icon-sm"
-              type="button"
-              variant="ghost"
-            >
-              <Trash2Icon />
-            </Button>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${prefix}-${section.id}-description`}>{labels.description}</Label>
-            <Textarea
-              id={`${prefix}-${section.id}-description`}
-              maxLength={1000}
-              onChange={(event) =>
-                saveSections(
-                  sections.map((item) =>
-                    item.id === section.id ? { ...item, description: event.target.value } : item
-                  )
-                )
-              }
-              rows={2}
-              value={section.description}
-            />
-          </div>
-          {fieldList(section.id)}
-        </fieldset>
-      ))}
+            {fieldList(section.id)}
+          </fieldset>
+        ))}
+      </div>
       {fieldList()}
     </section>
   );