Mejora en los cuadros de diálogo

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.

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"
   }
 }

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"
   }
 }

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")}
     >
+      <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}

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,7 +34,8 @@ export function RelationshipForm(props: RelationshipFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
+      <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
@@ -43,7 +44,10 @@ export function RelationshipForm(props: RelationshipFormProps) {
               id={`${id}-type`}
               label={t("relationshipType")}
               onValueChange={setTypeId}
-            options={relationshipTypes.map((item) => ({ value: item.id, label: item.values.name }))}
+              options={relationshipTypes.map((item) => ({
+                value: item.id,
+                label: item.values.name,
+              }))}
               placeholder={t("chooseRelation")}
               required
               value={typeId}
@@ -79,6 +83,7 @@ export function RelationshipForm(props: RelationshipFormProps) {
             guidance={t("relationshipGuidance")}
             title={t("helpTitle")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={!(typeId && targetId) || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,8 +44,10 @@ export function AssetForm(props: AssetFormProps) {
   const selectProps = { disabled: mutation.isPending, placeholder: t("noAssignment") };
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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")} />
@@ -64,7 +67,12 @@ export function AssetForm(props: AssetFormProps) {
                     onValueChange={selectTemplate}
                     options={
                       asset
-                    ? [{ value: asset.values.templateId, label: asset.specification.templateName }]
+                        ? [
+                            {
+                              value: asset.values.templateId,
+                              label: asset.specification.templateName,
+                            },
+                          ]
                         : templates.map((item) => ({ value: item.id, label: item.values.name }))
                     }
                     placeholder={t("chooseValue")}
@@ -130,6 +138,7 @@ export function AssetForm(props: AssetFormProps) {
                   />
                 </div>
               </div>
+            </FormSection>
             {fields.length > 0 && (
               <section className="space-y-3">
                 <h3 className="font-medium">{t("characteristics")}</h3>
@@ -197,6 +206,7 @@ export function AssetForm(props: AssetFormProps) {
             scopeNote={t("assetScope")}
             title={t("helpTitle")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +29,8 @@ export function BrandForm(props: BrandFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
+    <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>
@@ -77,6 +78,7 @@ export function BrandForm(props: BrandFormProps) {
           scopeNote={t("globalHelp")}
           title={t("helpTitle")}
         />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending || isReadingLogo} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +19,8 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
         <div className="space-y-2">
           <Label htmlFor={`${id}-name`}>{t("name")}</Label>
           <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
@@ -67,6 +68,7 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
           invalid={Object.keys(form.formState.errors).length > 0}
         />
         <CatalogHelp kind="field" scope={scope} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +18,8 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <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
@@ -49,7 +50,12 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
         {!symmetric && (
           <div className="space-y-2">
             <Label htmlFor={`${id}-inverse`}>{t("inverseName")}</Label>
-          <Input id={`${id}-inverse`} maxLength={100} required {...form.register("inverseName")} />
+            <Input
+              id={`${id}-inverse`}
+              maxLength={100}
+              required
+              {...form.register("inverseName")}
+            />
           </div>
         )}
         <div className="space-y-2">
@@ -61,6 +67,7 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
           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")}

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,7 +24,9 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
+      <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>
@@ -39,6 +42,7 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
                 />
               </div>
             </div>
+          </FormSection>
           <div className="space-y-2">
             <Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
             <SelectWithAction
@@ -103,6 +107,7 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
             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")}

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,7 +21,8 @@ export function SupportForm(props: SupportFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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>
@@ -39,7 +40,11 @@ export function SupportForm(props: SupportFormProps) {
             </div>
             <div className="space-y-2">
               <Label htmlFor={`${prefix}-destination`}>{t("support.destination")}</Label>
-            <Input id={`${prefix}-destination`} maxLength={300} {...form.register("destination")} />
+              <Input
+                id={`${prefix}-destination`}
+                maxLength={300}
+                {...form.register("destination")}
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor={`${prefix}-state`}>{t("support.state")}</Label>
@@ -90,6 +95,7 @@ export function SupportForm(props: SupportFormProps) {
             invalid={Object.keys(form.formState.errors).length > 0}
           />
           <SupportHelp />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +17,8 @@ export function SupportToolForm(props: SupportToolFormProps) {
   const { t } = useTranslation("assets");
   const id = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
+    <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>
@@ -41,6 +42,7 @@ export function SupportToolForm(props: SupportToolFormProps) {
           invalid={Object.keys(form.formState.errors).length > 0}
         />
         <SupportHelp tool />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +36,8 @@ export function WorkstationForm(props: WorkstationFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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("name")}</Label>
@@ -173,6 +174,7 @@ export function WorkstationForm(props: WorkstationFormProps) {
             scopeNote={t("workstationScope")}
             title={t("helpTitle")}
           />
+        </FormBody>
         <FormActions>
           <Button
             disabled={

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,7 +23,8 @@ export function QuickCreateDialog(props: QuickCreateDialogProps) {
       open
       title={t(target.kind === "system" ? "quickAddSystem" : "quickAddEnvironment")}
     >
-      <form className="space-y-4" onSubmit={submit}>
+      <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 })}
@@ -65,6 +66,7 @@ export function QuickCreateDialog(props: QuickCreateDialogProps) {
           )}
           <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")}

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,7 +37,8 @@ export function AccessFormFields(
   const prefix = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
+      <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
@@ -83,6 +84,7 @@ export function AccessFormFields(
             <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")}

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,7 +45,8 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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">
@@ -160,6 +161,7 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
             scopeNote={t("applications.scope")}
             title={t("applications.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +21,8 @@ export function AssignmentForm(props: AssignmentFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
+      <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+        <FormBody>
           <div className="space-y-2">
             <Label htmlFor={`${id}-department`}>{t("department")}</Label>
             <SelectWithAction
@@ -75,7 +76,9 @@ export function AssignmentForm(props: AssignmentFormProps) {
             disabled={!!form.watch("endDate")}
             id={`${id}-primary`}
             label={t("primaryDepartment")}
-          onCheckedChange={(checked) => form.setValue("isPrimary", checked, { shouldDirty: true })}
+            onCheckedChange={(checked) =>
+              form.setValue("isPrimary", checked, { shouldDirty: true })
+            }
           />
           <p className="text-xs text-muted-foreground">{t("assignmentHelp")}</p>
           <CompanyFeedback
@@ -84,6 +87,7 @@ export function AssignmentForm(props: AssignmentFormProps) {
           />
 
           <EntityHelp kind="assignment" />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +44,8 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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">
@@ -142,6 +143,7 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
             scopeNote={t("certificates.scope")}
             title={t("certificates.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +20,8 @@ export function CompanyForm(props: CompanyFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <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>
         )}
@@ -54,6 +55,7 @@ export function CompanyForm(props: CompanyFormProps) {
         />
 
         <EntityHelp kind="company" />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +17,8 @@ export function DepartmentForm(props: DepartmentFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <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")} />
@@ -38,6 +39,7 @@ export function DepartmentForm(props: DepartmentFormProps) {
         />
 
         <EntityHelp kind="department" />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +40,8 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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}
@@ -127,6 +128,7 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
             scopeNote={t("folders.scope")}
             title={t("folders.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending || !ready} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,14 +20,17 @@ export function InterventionTemplateForm(props: InterventionTemplateFormProps) {
   const { t } = useTranslation("companies");
   const prefix = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
+    <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>
+            <Label htmlFor={`${prefix}-description`}>
+              {t("interventionTemplates.description")}
+            </Label>
             <Textarea
               id={`${prefix}-description`}
               maxLength={4000}
@@ -67,6 +70,7 @@ export function InterventionTemplateForm(props: InterventionTemplateFormProps) {
           invalid={Object.keys(form.formState.errors).length > 0}
         />
         <InterventionTemplateHelp />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +52,8 @@ export function InterventionForm(props: InterventionFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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}
@@ -149,6 +150,7 @@ export function InterventionForm(props: InterventionFormProps) {
             invalid={Object.keys(form.formState.errors).length > 0}
           />
           <InterventionHelp />
+        </FormBody>
         <FormActions>
           <Button
             disabled={mutation.isPending || !companyId || !lookups.data || lookups.isError}

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,7 +44,8 @@ export function MailConfigurationForm(props: MailConfigurationFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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">
@@ -109,6 +110,7 @@ export function MailConfigurationForm(props: MailConfigurationFormProps) {
             scopeNote={t("mail.scope")}
             title={t("mail.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={disabled || !ready} type="submit">
             {t(disabled ? "saving" : "save")}

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,7 +31,8 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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}-mailbox`}>{t("mailbox.titleSingle")}</Label>
@@ -107,6 +108,7 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
             guidance={t("mailbox.useGuidance")}
             title={t("mailbox.useHelp")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending || !query.data} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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>

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,7 +17,8 @@ export function PersonForm(props: PersonFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="max-w-2xl space-y-6" onSubmit={submit}>
+    <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>
@@ -60,6 +61,7 @@ export function PersonForm(props: PersonFormProps) {
         />
         <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")}

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,7 +47,8 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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">
@@ -99,7 +100,8 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
                   id={`${prefix}-connection`}
                   label={t("printers.connection")}
                   onValueChange={(value) => {
-                  const parsed = PrinterConfigurationInputSchema.shape.connection.safeParse(value);
+                    const parsed =
+                      PrinterConfigurationInputSchema.shape.connection.safeParse(value);
                     if (parsed.success) {
                       form.setValue("connection", parsed.data);
                     }
@@ -159,6 +161,7 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
             scopeNote={t("printers.scope")}
             title={t("printers.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +18,8 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
   const { t } = useTranslation("companies");
   const prefix = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
+    <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>
@@ -62,7 +63,12 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
           />
           <div className="space-y-2">
             <Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
-          <Textarea id={`${prefix}-notes`} maxLength={4000} rows={3} {...form.register("notes")} />
+            <Textarea
+              id={`${prefix}-notes`}
+              maxLength={4000}
+              rows={3}
+              {...form.register("notes")}
+            />
           </div>
         </fieldset>
         <ProcessFeedback
@@ -70,6 +76,7 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
           invalid={Object.keys(form.formState.errors).length > 0}
         />
         <ProcessHelp template />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +20,8 @@ export function ProcessStartForm(props: ProcessStartFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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>
@@ -87,6 +88,7 @@ export function ProcessStartForm(props: ProcessStartFormProps) {
             invalid={Object.keys(form.formState.errors).length > 0}
           />
           <ProcessHelp />
+        </FormBody>
         <FormActions>
           <Button
             disabled={

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,7 +20,8 @@ export function ProcessEditForm(props: ProcessEditFormProps) {
   const { t } = useTranslation("companies");
   const prefix = useId();
   return (
-    <form className="space-y-5" onSubmit={submit}>
+    <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>
@@ -47,7 +48,12 @@ export function ProcessEditForm(props: ProcessEditFormProps) {
           </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")} />
+            <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) => (
@@ -59,6 +65,7 @@ export function ProcessEditForm(props: ProcessEditFormProps) {
           invalid={Object.keys(form.formState.errors).length > 0}
         />
         <ProcessHelp />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +40,8 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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("remote.person")}</Label>
@@ -135,6 +136,7 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
             scopeNote={t("remote.scope")}
             title={t("remote.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={!ready || mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +17,8 @@ export function SiteForm(props: SiteFormProps) {
   const { t } = useTranslation("companies");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <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>
@@ -41,6 +42,7 @@ export function SiteForm(props: SiteFormProps) {
         />
 
         <EntityHelp kind="site" />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,12 +23,15 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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) }}
+                action={
+                  fixed ? undefined : { label: t("newPerson"), onClick: () => setQuick(true) }
+                }
                 disabled={fixed}
                 id={`${prefix}-person`}
                 label={t("telework.person")}
@@ -96,6 +99,7 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
             scopeNote={t("telework.scope")}
             title={t("telework.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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,7 +38,8 @@ export function TicketForm(props: TicketFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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>
@@ -140,6 +141,7 @@ export function TicketForm(props: TicketFormProps) {
             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")}

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,7 +35,8 @@ export function WorkProfileForm(props: WorkProfileFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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>
@@ -119,6 +120,7 @@ export function WorkProfileForm(props: WorkProfileFormProps) {
             scopeNote={t("profiles.scope")}
             title={t("profiles.help")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={disabled || !inventory.data || !access.data} type="submit">
             {t(disabled ? "saving" : "save")}

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,7 +15,8 @@ export function PasswordForm(props: PasswordFormProps) {
   const { t } = useTranslation("identity");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
         {showTitle && (
           <h3 className="font-semibold">
             {t(target ? "resetPassword" : "changePassword")}
@@ -56,6 +57,7 @@ export function PasswordForm(props: PasswordFormProps) {
           </p>
         )}
         <FormFeedback error={mutation.error} success={mutation.isSuccess} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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"

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,7 +16,8 @@ export function UserForm(props: UserFormProps) {
   const { t } = useTranslation("identity");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <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}-name`}>{t("name")}</Label>
@@ -72,6 +73,7 @@ export function UserForm(props: UserFormProps) {
           </p>
         )}
         <FormFeedback error={mutation.error} success={mutation.isSuccess} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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"
   }
 }

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"
   }
 }

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,7 +19,8 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
   const { t } = useTranslation("resources");
   const id = useId();
   return (
-    <form className="space-y-4" onSubmit={submit}>
+    <form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
+      <FormBody>
         <div className="space-y-2">
           <Label htmlFor={`${id}-name`}>{t("name")}</Label>
           <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
@@ -67,6 +68,7 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
           invalid={Object.keys(form.formState.errors).length > 0}
         />
         <CatalogHelp kind="field" scope={scope} />
+      </FormBody>
       <FormActions>
         <Button disabled={mutation.isPending} type="submit">
           {t(mutation.isPending ? "saving" : "save")}

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,7 +24,9 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
   const id = useId();
   return (
     <>
-      <form className="space-y-4" onSubmit={submit}>
+      <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>
@@ -61,6 +64,7 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
               />
               <p className="text-xs text-muted-foreground">{t("templateUsageHelp")}</p>
             </div>
+          </FormSection>
           <div className="space-y-2">
             <Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
             <SelectWithAction
@@ -125,6 +129,7 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
             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")}

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,8 +43,10 @@ export function ResourceForm(props: ResourceFormProps) {
   const prefix = useId();
   return (
     <>
-      <form className="space-y-5" onSubmit={submit}>
+      <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")} />
@@ -90,6 +93,7 @@ export function ResourceForm(props: ResourceFormProps) {
                   />
                 </div>
               </div>
+            </FormSection>
             <ResourceIntegrationFields
               fixed={!!resource}
               integration={values.integration}
@@ -147,6 +151,7 @@ export function ResourceForm(props: ResourceFormProps) {
             scopeNote={t(`${helpPrefix}Scope`)}
             title={t("helpTitle")}
           />
+        </FormBody>
         <FormActions>
           <Button disabled={mutation.isPending} type="submit">
             {t(mutation.isPending ? "saving" : "save")}

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>

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>
+        <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>
+  );
+}

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>
+  );
+}

packages/rdx-ui/src/components/template-sections-editor.tsx

@@ -87,8 +87,13 @@ export function TemplateSectionsEditor({
         </Button>
       </div>
       <p className="text-xs text-muted-foreground">{labels.help}</p>
+      <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}>
+          <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">
@@ -157,6 +162,7 @@ export function TemplateSectionsEditor({
             {fieldList(section.id)}
           </fieldset>
         ))}
+      </div>
       {fieldList()}
     </section>
   );