apps/web/src/development/ui-kit/ui-kit-page.tsx

@@ -2,7 +2,7 @@ import {
   RdxBadge,
   RdxContextPanel,
   RdxEditorActionBar,
-  RdxEditorLayout,
+  RdxEditorPageLayout,
   RdxFormGrid,
   RdxPageActions,
   RdxPageContainer,
@@ -751,15 +751,13 @@ export default function UiKitPage() {
           title="Editor foundations"
         >
           <div className="grid gap-4">
-            <ExampleCard title="RdxPageContainer + RdxEditorLayout">
+            <ExampleCard title="RdxEditorPageLayout simple">
               <div className="rounded-lg border border-border bg-muted/30">
-                <RdxPageContainer width="content">
-                  <RdxEditorLayout>
+                <RdxEditorPageLayout complexity="simple">
                   <div className="rounded-lg border border-dashed border-border bg-background p-4 text-sm text-foreground">
                     Centered editor content
                   </div>
-                  </RdxEditorLayout>
-                </RdxPageContainer>
+                </RdxEditorPageLayout>
               </div>
             </ExampleCard>
 
@@ -808,8 +806,7 @@ export default function UiKitPage() {
               title="Simple editor composition"
             >
               <div className="rounded-lg border border-border bg-muted/30">
-                <RdxPageContainer width="content">
-                  <RdxEditorLayout>
+                <RdxEditorPageLayout complexity="simple">
                   <div className="rounded-2xl border border-border/60 bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
                     <div className="flex min-w-0 flex-col gap-6">
                       <div className="rounded-lg border border-border bg-background px-4 py-3 text-sm text-muted-foreground">
@@ -849,8 +846,7 @@ export default function UiKitPage() {
                       </div>
                     </div>
                   </div>
-                  </RdxEditorLayout>
-                </RdxPageContainer>
+                </RdxEditorPageLayout>
               </div>
             </ExampleCard>
 
@@ -874,14 +870,10 @@ export default function UiKitPage() {
 
                   <div className="flex min-h-0 flex-1 flex-col bg-muted/20">
                     <div className="min-h-0 flex-1 overflow-y-auto">
-                      <RdxPageContainer width="full">
-                        <RdxEditorLayout
+                      <RdxEditorPageLayout
                         aside={
                           <div className="flex min-w-0 flex-col gap-6">
-                              <RdxPanel
-                                description="Secondary recipient controls."
-                                title="Recipient"
-                              >
+                            <RdxPanel description="Secondary recipient controls." title="Recipient">
                               <div className="rounded-md border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground">
                                 Customer selector and helper actions
                               </div>
@@ -902,6 +894,7 @@ export default function UiKitPage() {
                             </RdxPanel>
                           </div>
                         }
+                        complexity="complex"
                       >
                         <div className="rounded-2xl border border-border bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
                           <div className="flex min-w-0 flex-col gap-6">
@@ -931,8 +924,7 @@ export default function UiKitPage() {
                             </section>
                           </div>
                         </div>
-                        </RdxEditorLayout>
-                      </RdxPageContainer>
+                      </RdxEditorPageLayout>
                     </div>
 
                     <RdxEditorActionBar

apps/web/src/home/ui/pages/home-page.tsx

@@ -1,10 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
-import {
-  RdxPageContainer,
-  RdxPageFrame,
-  RdxPageHeader,
-  RdxPageStack,
-} from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components";
 import { Skeleton } from "@repo/shadcn-ui/components";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -33,7 +28,6 @@ const HomeKpisSkeleton = () => {
   );
 };
 
-/** Renderiza el dashboard dentro del frame estándar de página. */
 export const HomePage = () => {
   const { t } = useAppTranslation();
   const navigate = useNavigate();
@@ -41,8 +35,8 @@ export const HomePage = () => {
 
   if (ctrl.hasBlockingError && ctrl.pageError) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <RdxPageContainer width="full">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={ctrl.pageError.description}
             primaryAction={{
@@ -56,13 +50,12 @@ export const HomePage = () => {
             title={ctrl.pageError.title}
             variant="server"
           />
+        </div>
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 
   return (
-    <RdxPageFrame>
     <RdxPageContainer width="full">
       <RdxPageStack spacing="default">
         <RdxPageHeader
@@ -115,6 +108,5 @@ export const HomePage = () => {
         </p>
       </RdxPageStack>
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };

apps/web/src/layout/app-fullscreen-layout.tsx

@@ -12,7 +12,8 @@ export const AppFullscreenLayoutFrame = ({ children }: AppFullscreenLayoutFrameP
 };
 
 /**
- * Shell para páginas fullscreen sin sidebar ni topbar global.
+ * Shell de aplicación para páginas que ocupan toda el área disponible.
+ * Se utiliza en editores y vistas de detalle sin sidebar ni topbar global.
  */
 
 export const AppFullscreenLayout = () => {

apps/web/src/settings/settings-layout.tsx

@@ -1,9 +1,4 @@
-import {
-  RdxPageContainer,
-  RdxPageFrame,
-  RdxPageHeader,
-  RdxPageStack,
-} from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components";
 import { Outlet } from "react-router-dom";
 
 import type { SettingsNavigationSection } from "@/settings/build-settings-navigation";
@@ -16,14 +11,10 @@ interface SettingsLayoutProps {
   sections: SettingsNavigationSection[];
 }
 
-/**
- * Compone la navegación y el contenido de configuración dentro del frame estándar de página.
- */
 export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
   const { t } = useAppTranslation();
 
   return (
-    <RdxPageFrame>
     <RdxPageContainer width="full">
       <RdxPageStack spacing="default">
         <RdxPageHeader
@@ -42,6 +33,5 @@ export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
         </div>
       </RdxPageStack>
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };

modules/audit/src/web/list/ui/audit-page.tsx

@@ -1,10 +1,5 @@
 import { ErrorAlert, PageErrorState, SimpleSearchInput } from "@erp/core/components";
-import {
-  RdxPageContainer,
-  RdxPageFrame,
-  RdxPageHeader,
-  RdxPageStack,
-} from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components";
 import {
   Button,
   Spinner,
@@ -23,7 +18,6 @@ import { AuditFilterChips, AuditFiltersPanel } from "./audit-filters";
 import { AuditGrid } from "./audit-grid";
 import { useAuditGridColumns } from "./use-audit-grid-columns";
 
-/** Compone el listado de auditoría dentro del frame estándar de página. */
 export const AuditPage = () => {
   const { t } = useTranslation();
   const controller = useAuditPageController();
@@ -34,8 +28,7 @@ export const AuditPage = () => {
 
   if (controller.isError && !controller.hasUsableData) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <RdxPageContainer width="full">
         <PageErrorState
           description={t("audit.error.load")}
           primaryAction={{
@@ -47,12 +40,10 @@ export const AuditPage = () => {
           variant="unknown"
         />
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 
   return (
-    <RdxPageFrame>
     <RdxPageContainer width="full">
       <RdxPageStack spacing="default">
         <RdxPageHeader description={t("audit.description")} title={t("audit.title")} />
@@ -99,7 +90,6 @@ export const AuditPage = () => {
         <AuditEntrySheet entryId={controller.entry} onClose={controller.closeEntry} />
       </RdxPageStack>
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };
 

modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx

@@ -1,5 +1,4 @@
-import { RdxBadge } from "@repo/rdx-ui/components";
-import { Card, CardContent } from "@repo/shadcn-ui/components";
+import { Card, CardContent, RdxBadge } from "@repo/shadcn-ui/components";
 import { CalendarClockIcon } from "lucide-react";
 
 import { useTranslation } from "../../../../i18n";

modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx

@@ -1,6 +1,6 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
-import { Button, Card, CardContent } from "@repo/shadcn-ui/components";
+import { RdxPageContainer } from "@repo/rdx-ui/components";
+import { Button, Card, CardContent, RdxBadge } from "@repo/shadcn-ui/components";
 import { PlusIcon } from "lucide-react";
 
 import { useTranslation } from "../../../../i18n";

modules/core/src/web/components/form/form-actions/index.ts

@@ -1 +1,2 @@
-export * from "./page-keyboard-shortcuts-button";
+export * from './page-form-header';
+export * from './page-keyboard-shortcuts-button';

modules/core/src/web/components/form/form-actions/page-form-header.tsx

@@ -1,53 +1,53 @@
+import { RdxBadge } from "@repo/rdx-ui/components";
 import { Button } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { ArrowLeftIcon } from "lucide-react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ReactNode } from "react";
 
-import { RdxBadge } from "../rdx-badge.tsx";
+export interface PageFormHeaderProps {
+  title: string | ReactNode;
 
-export interface RdxEditorHeaderProps
-  extends Omit<ComponentPropsWithoutRef<"header">, "children" | "title"> {
-  title: ReactNode;
-  actions?: ReactNode;
-  backLabel?: string;
+  backLabel: string;
   onBack?: () => void;
-  status?: ReactNode;
+
+  statusLabel?: string;
   showStatus?: boolean;
+
+  actions?: ReactNode;
   children?: ReactNode;
+
+  className?: string;
   contentClassName?: string;
 }
 
-/**
- * Cabecera compacta para páginas fullscreen.
- * Presenta navegación de retorno, título, estado y acciones.
- */
-export const RdxEditorHeader = ({
+export const PageFormHeader = ({
   title,
-  actions,
   backLabel,
   onBack,
-  status,
-  showStatus = true,
+  statusLabel,
+  showStatus = false,
+  actions,
   children,
-  contentClassName,
   className,
-  ...props
-}: RdxEditorHeaderProps) => {
+  contentClassName,
+}: PageFormHeaderProps) => {
   return (
     <header
-      className={cn("z-50 shrink-0 bg-background ring-1 ring-foreground/10 shadow-xs", className)}
-      {...props}
+      className={cn(
+        "sticky top-0 z-50 ring-1 ring-foreground/10 bg-background shadow-xs",
+        className
+      )}
     >
       <div
         className={cn(
-          "flex min-h-14 items-center justify-between gap-6 border-b px-4 py-2 sm:px-6 md:min-h-18",
+          "flex h-14 items-center justify-between gap-6 border-b px-4 py-2 sm:px-6 md:h-18",
           contentClassName
         )}
       >
         <div className="flex min-w-0 items-center gap-3">
-          {onBack ? (
           <Button
             aria-label={backLabel}
+            disabled={!onBack}
             onClick={onBack}
             size="icon"
             type="button"
@@ -55,21 +55,20 @@ export const RdxEditorHeader = ({
           >
             <ArrowLeftIcon aria-hidden="true" className="size-5" />
           </Button>
-          ) : null}
 
           <div className="flex min-w-0 items-center gap-4">
             <h1 className="min-w-0 truncate text-xl font-semibold tracking-tight text-foreground lg:text-2xl">
               {title}
             </h1>
 
-            {status ? (
+            {statusLabel ? (
               <RdxBadge
                 className={cn(
                   "border-amber-500 bg-amber-200 text-amber-900 transition-opacity duration-200",
                   showStatus ? "opacity-100" : "pointer-events-none opacity-0"
                 )}
               >
-                {status}
+                {statusLabel}
               </RdxBadge>
             ) : null}
           </div>

modules/customer-invoices/src/web/customer-invoice-routes.tsx

@@ -2,6 +2,14 @@ import type { ModuleClientParams } from "@erp/core/client";
 import { lazy } from "react";
 import { Outlet, type RouteObject } from "react-router-dom";
 
+const ProformaLayout = lazy(() =>
+  import("./proformas/shared/ui").then((m) => ({ default: m.ProformaLayout }))
+);
+
+const RecurringProformaLayout = lazy(() =>
+  import("./recurring-proformas/shared/ui").then((m) => ({ default: m.RecurringProformaLayout }))
+);
+
 const ProformasListPage = lazy(() =>
   import("./proformas/list").then((m) => ({ default: m.ListProformasPage }))
 );
@@ -38,6 +46,10 @@ const RecurringProformaDetailPage = lazy(() =>
   import("./recurring-proformas").then((m) => ({ default: m.RecurringProformaDetailPage }))
 );
 
+const IssuedInvoicesLayout = lazy(() =>
+  import("./issued-invoices/shared/ui").then((m) => ({ default: m.IssuedInvoicesLayout }))
+);
+
 const IssuedInvoiceListPage = lazy(() =>
   import("./issued-invoices/list").then((m) => ({ default: m.ListIssuedInvoicesPage }))
 );
@@ -58,7 +70,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-sidebar",
         protected: true,
       },
-      element: <Outlet context={params} />,
+      element: (
+        <ProformaLayout>
+          <Outlet context={params} />
+        </ProformaLayout>
+      ),
       children: [
         {
           index: true,
@@ -85,7 +101,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <ProformasCreatePage />,
+      element: (
+        <ProformaLayout>
+          <ProformasCreatePage />
+        </ProformaLayout>
+      ),
     },
 
     {
@@ -94,7 +114,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <ProformaUpdatePage />,
+      element: (
+        <ProformaLayout>
+          <ProformaUpdatePage />
+        </ProformaLayout>
+      ),
     },
 
     {
@@ -103,7 +127,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <ProformaDetailPage />,
+      element: (
+        <ProformaLayout>
+          <ProformaDetailPage />
+        </ProformaLayout>
+      ),
     },
     {
       path: "recurring-proformas",
@@ -111,7 +139,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-sidebar",
         protected: true,
       },
-      element: <RecurringProformasListPage />,
+      element: (
+        <RecurringProformaLayout>
+          <RecurringProformasListPage />
+        </RecurringProformaLayout>
+      ),
     },
     {
       path: "recurring-proformas/archived",
@@ -119,7 +151,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-sidebar",
         protected: true,
       },
-      element: <RecurringProformasListPage />,
+      element: (
+        <RecurringProformaLayout>
+          <RecurringProformasListPage />
+        </RecurringProformaLayout>
+      ),
     },
     {
       path: "recurring-proformas/create",
@@ -127,7 +163,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <RecurringProformaCreatePage />,
+      element: (
+        <RecurringProformaLayout>
+          <RecurringProformaCreatePage />
+        </RecurringProformaLayout>
+      ),
     },
     {
       path: "recurring-proformas/:recurring_proforma_id",
@@ -135,7 +175,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <RecurringProformaDetailPage />,
+      element: (
+        <RecurringProformaLayout>
+          <RecurringProformaDetailPage />
+        </RecurringProformaLayout>
+      ),
     },
 
     {
@@ -144,7 +188,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-sidebar",
         protected: true,
       },
-      element: <Outlet context={params} />,
+      element: (
+        <IssuedInvoicesLayout>
+          <Outlet context={params} />
+        </IssuedInvoicesLayout>
+      ),
       children: [
         { path: "", index: true, element: <IssuedInvoiceListPage /> }, // index
         { path: "list", element: <IssuedInvoiceListPage /> },
@@ -168,7 +216,11 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <IssuedInvoiceDetailPage />,
+      element: (
+        <IssuedInvoicesLayout>
+          <IssuedInvoiceDetailPage />
+        </IssuedInvoicesLayout>
+      ),
     },
     {
       path: "settings/billing/verifactu",

modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-detail-content.tsx

@@ -10,7 +10,7 @@ export const IssuedInvoiceDetailContent = ({
   inspector,
 }: IssuedInvoiceDetailContentProps) => {
   return (
-    <div className="min-h-full lg:h-full lg:min-h-0 lg:overflow-hidden">
+    <div className="min-h-0 flex-1 overflow-auto lg:overflow-hidden">
       <div className="grid min-h-full grid-cols-1 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_340px] lg:overflow-hidden xl:grid-cols-[minmax(0,1fr)_380px]">
         {documentPane}
         {inspector}

modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-page-header.tsx

@@ -1,4 +1,4 @@
-import { RdxEditorHeader } from "@repo/rdx-ui/components";
+import { PageFormHeader } from "@erp/core/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import type { ReactNode } from "react";
 
@@ -26,17 +26,17 @@ export const IssuedInvoicePageHeader = ({
   contentClassName,
 }: IssuedInvoicePageHeaderProps) => {
   return (
-    <RdxEditorHeader
+    <PageFormHeader
       actions={actions}
       backLabel={backLabel}
       className={cn("shrink-0", className)}
       contentClassName={contentClassName}
       onBack={onBack}
       showStatus={showStatus}
-      status={statusLabel}
+      statusLabel={statusLabel}
       title={title}
     >
       {children}
-    </RdxEditorHeader>
+    </PageFormHeader>
   );
 };

modules/customer-invoices/src/web/issued-invoices/detail/ui/pages/issued-invoice-detail-page.tsx

@@ -1,5 +1,4 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
 
 import { useTranslation } from "../../../../i18n";
 import { useIssuedInvoiceDetailPageController } from "../../controllers";
@@ -21,8 +20,8 @@ export const IssuedInvoiceDetailPage = () => {
 
   if (ctrl.state.pageError) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <div className="p-4 sm:p-6">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={ctrl.state.pageError.description}
             primaryAction={ctrl.state.pageError.primaryAction}
@@ -31,15 +30,15 @@ export const IssuedInvoiceDetailPage = () => {
             title={ctrl.state.pageError.title}
             variant={ctrl.state.pageError.variant}
           />
-        </RdxPageContainer>
-      </RdxPageFrame>
+        </div>
+      </div>
     );
   }
 
   if (!(ctrl.header && ctrl.document && ctrl.general)) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <div className="p-4 sm:p-6">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={t("pages.issued_invoices.detail.page_error.inconsistent.description")}
             secondaryAction={{
@@ -49,23 +48,20 @@ export const IssuedInvoiceDetailPage = () => {
             title={t("pages.issued_invoices.detail.page_error.unknown.title")}
             variant="unknown"
           />
-        </RdxPageContainer>
-      </RdxPageFrame>
+        </div>
+      </div>
     );
   }
 
   return (
-    <RdxPageFrame
-      contentClassName="lg:overflow-hidden"
-      header={
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
       <IssuedInvoiceDetailHeader
         actions={ctrl.actions}
         header={ctrl.header}
         onBack={ctrl.navigation.navigateBack}
         onExecuteAction={ctrl.handlers.executeAction}
       />
-      }
-    >
+
       <IssuedInvoiceDetailContent
         documentPane={
           <IssuedInvoiceDocumentPane
@@ -84,6 +80,6 @@ export const IssuedInvoiceDetailPage = () => {
           />
         }
       />
-    </RdxPageFrame>
+    </div>
   );
 };

modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-status-segmented-filter.tsx

@@ -1,4 +1,3 @@
-import { RdxBadge } from "@repo/rdx-ui/components";
 import { ToggleGroup, ToggleGroupItem } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import {

modules/customer-invoices/src/web/issued-invoices/list/ui/components/verifactu-status-badge.tsx

@@ -1,4 +1,3 @@
-import { RdxBadge } from "@repo/rdx-ui/components";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 

modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx

@@ -1,6 +1,6 @@
 import { ErrorAlert, PageErrorState, PageHeader, SimpleSearchInput } from "@erp/core/components";
 import { useReturnToNavigation } from "@erp/core/hooks";
-import { LogoVerifactu, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { LogoVerifactu } from "@repo/rdx-ui/components";
 import { Alert, AlertDescription, AlertTitle, Button } from "@repo/shadcn-ui/components";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
@@ -58,8 +58,8 @@ export const ListIssuedInvoicesPage = () => {
 
   if (hasBlockingError && pageError) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <div className="p-4 sm:p-6">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={pageError.description}
             primaryAction={
@@ -88,14 +88,13 @@ export const ListIssuedInvoicesPage = () => {
             title={pageError.title}
             variant={pageError.variant}
           />
-        </RdxPageContainer>
-      </RdxPageFrame>
+        </div>
+      </div>
     );
   }
 
   return (
-    <RdxPageFrame>
-      <RdxPageContainer className="space-y-6" width="full">
+    <div className="p-6 space-y-6">
       <PageHeader
         description={t("pages.issued_invoices.list.description")}
         rightSlot={
@@ -128,6 +127,7 @@ export const ListIssuedInvoicesPage = () => {
           <LogoVerifactu className="text-green-800 w-50" color="" />
         </Alert>
 
+        <div className="min-h-0 flex-1 overflow-auto">
           <IssuedInvoicesGrid
             columns={columns}
             data={listCtrl.data}
@@ -164,10 +164,10 @@ export const ListIssuedInvoicesPage = () => {
               </div>
             }
           />
+        </div>
 
         {listCtrl.data.totalItems === 0 ? <IssuedInvoicesEmptyGrid /> : null}
       </div>
-      </RdxPageContainer>
-    </RdxPageFrame>
+    </div>
   );
 };

modules/customer-invoices/src/web/issued-invoices/shared/ui/blocks/index.ts

@@ -0,0 +1 @@
+export * from "./issued-invoices-layout";

modules/customer-invoices/src/web/issued-invoices/shared/ui/blocks/issued-invoices-layout.tsx

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from "react";
+
+export const IssuedInvoicesLayout = ({ children }: PropsWithChildren) => {
+  return <div className="space-y-4">{children}</div>;
+};

modules/customer-invoices/src/web/proformas/create/ui/blocks/proforma-create-customer-field.tsx

@@ -38,7 +38,7 @@ export const ProformaCreateCustomerField = ({
           <div className="relative">
             <Button
               className={cn(
-                "h-10 w-full justify-between border bg-muted/20 px-3 font-normal text-left text-foreground hover:bg-muted/50",
+                "h-10 w-full justify-between border bg-muted/50 px-3 font-normal text-left text-foreground hover:bg-muted/50",
                 !selectedCustomer && "text-muted-foreground"
               )}
               disabled={isDisabled}

modules/customer-invoices/src/web/proformas/create/ui/blocks/proforma-create-header.tsx

@@ -22,7 +22,7 @@ export const ProformaCreateHeader = ({
       actions={
         <FormActionsBar align="end" reverseOnMobile={false}>
           <PageKeyboardShortcutsButton
-            className="hidden"
+            className="hidden sm:flex"
             label="Ver atajos de teclado"
             shortcuts={[
               { keys: "Ctrl+S", label: "Crear y continuar" },

modules/customer-invoices/src/web/proformas/create/ui/blocks/proforma-create-initial-info-card.tsx

@@ -1,8 +1,8 @@
 import type { CustomerSelectionOption } from "@erp/customers";
 import {
   DatePickerField,
-  RdxFormGrid,
-  RdxPanel,
+  FormSectionCard,
+  FormSectionGrid,
   SelectField,
   type SelectFieldItem,
 } from "@repo/rdx-ui/components";
@@ -43,14 +43,13 @@ export const ProformaCreateInitialInfoCard = ({
   const { t } = useTranslation();
 
   return (
-    <RdxPanel
+    <FormSectionCard
       icon={<FileTextIcon className="size-5" />}
       title={t("proformas.create.initial_info.title", "Información inicial")}
-      variant="card"
     >
-      <RdxFormGrid className="md:grid-cols-6 2xl:grid-cols-12">
+      <FormSectionGrid className="md:grid-cols-6 2xl:grid-cols-12">
         <ProformaCreateCustomerField
-          className="md:col-span-8"
+          className="md:col-span-4"
           disabled={disabled}
           onClearCustomer={onClearCustomer}
           onSelectCustomer={onSelectCustomer}
@@ -58,7 +57,7 @@ export const ProformaCreateInitialInfoCard = ({
         />
 
         <DatePickerField<ProformaCreateForm>
-          className="md:col-span-4"
+          className="md:col-span-2"
           disabled={disabled}
           label={t("proformas.create.initial_info.proforma_date.label", "Fecha")}
           name="proformaDate"
@@ -70,7 +69,7 @@ export const ProformaCreateInitialInfoCard = ({
         />
 
         <SelectField<ProformaCreateForm>
-          className="md:col-span-3"
+          className="md:col-span-2"
           disabled={disabled || isProformaSeriesLoading}
           items={proformaSeriesOptions}
           label={t("proformas.create.initial_info.proforma_series.label", "Serie de esta proforma")}
@@ -88,7 +87,7 @@ export const ProformaCreateInitialInfoCard = ({
         />
 
         <SelectField<ProformaCreateForm>
-          className="md:col-span-3"
+          className="md:col-span-2"
           disabled={disabled || isTargetInvoiceSeriesLoading}
           items={targetInvoiceSeriesOptions}
           label={t("proformas.create.initial_info.invoice_series.label", "Serie de la factura")}
@@ -101,7 +100,7 @@ export const ProformaCreateInitialInfoCard = ({
         />
 
         <SelectField<ProformaCreateForm>
-          className="md:col-span-6"
+          className="md:col-span-4"
           clearable
           clearLabel={t("form_fields.proformas.payment_term.clear_label", "Sin plazo de pago")}
           disabled={disabled || isPaymentTermsLoading}
@@ -116,7 +115,7 @@ export const ProformaCreateInitialInfoCard = ({
               : t("form_fields.proformas.payment_term.placeholder", "Selecciona un plazo de pago")
           }
         />
-      </RdxFormGrid>
-    </RdxPanel>
+      </FormSectionGrid>
+    </FormSectionCard>
   );
 };

modules/customer-invoices/src/web/proformas/create/ui/components/proforma-create-skeleton.test.tsx

@@ -1,15 +0,0 @@
-import assert from "node:assert/strict";
-import test from "node:test";
-
-import { renderToStaticMarkup } from "react-dom/server";
-
-import { ProformaCreateSkeleton } from "./proforma-create-skeleton";
-
-test("Proforma Create skeleton comparte el frame del editor productivo", () => {
-  const html = renderToStaticMarkup(<ProformaCreateSkeleton />);
-
-  assert.match(html, /flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden/);
-  assert.match(html, /rdx-page-container/);
-  assert.doesNotMatch(html, /fixed inset-0/);
-  assert.equal(html.match(/overflow-y-auto/g)?.length, 1);
-});

modules/customer-invoices/src/web/proformas/create/ui/components/proforma-create-skeleton.tsx

@@ -1,25 +1,16 @@
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
 import { Skeleton } from "@repo/shadcn-ui/components";
 
 export const ProformaCreateSkeleton = () => {
   return (
-    <RdxPageFrame
-      contentClassName="bg-muted/20"
-      header={
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
       <div className="border-b px-6 py-4">
         <Skeleton className="h-10 w-full max-w-md" />
       </div>
-      }
-    >
-      <RdxPageContainer width="content">
-        <RdxEditorLayout>
-          <div className="space-y-6">
+      <div className="flex-1 space-y-6 overflow-y-auto p-6">
         <Skeleton className="h-10 w-full" />
         <Skeleton className="h-64 w-full" />
         <Skeleton className="h-48 w-full" />
       </div>
-        </RdxEditorLayout>
-      </RdxPageContainer>
-    </RdxPageFrame>
+    </div>
   );
 };

modules/customer-invoices/src/web/proformas/create/ui/pages/proforma-create-page.tsx

@@ -1,12 +1,7 @@
 import { ErrorAlert } from "@erp/core/components";
 import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
 import { QuickCreateCustomerDialog, SelectCustomerDialog } from "@erp/customers";
-import {
-  RdxEditorLayout,
-  RdxPageContainer,
-  RdxPageFrame,
-  RdxPageStack,
-} from "@repo/rdx-ui/components";
+import { RdxEditorPageLayout, RdxPageContainer, RdxPageStack } from "@repo/rdx-ui/components";
 import { FormProvider } from "react-hook-form";
 
 import { ProformaInfoAlert } from "../../../update/ui/components";
@@ -21,11 +16,9 @@ export const ProformaCreatePage = () => {
   });
 
   return (
+    <RdxPageStack className="fixed inset-0 min-h-0 overflow-hidden" spacing="none">
       <FormProvider {...createCtrl.form}>
         <UnsavedChangesProvider isDirty={createCtrl.form.formState.isDirty}>
-        <RdxPageFrame
-          contentClassName="bg-muted/20"
-          header={
           <ProformaCreateHeader
             formId={createCtrl.formId}
             isSaving={createCtrl.isCreating}
@@ -36,10 +29,13 @@ export const ProformaCreatePage = () => {
               fiscal. Puedes convertirlas en facturas cuando sean aceptadas por el cliente.
             </ProformaInfoAlert>
           </ProformaCreateHeader>
-          }
+
+          <RdxPageContainer
+            className="min-h-0 flex-1 overflow-y-auto bg-muted/20"
+            padding="none"
+            width="full"
           >
-          <RdxPageContainer width="content">
-            <RdxEditorLayout>
+            <RdxEditorPageLayout width="simple">
               <RdxPageStack spacing="default">
                 {createCtrl.isCreateError && (
                   <ErrorAlert
@@ -79,9 +75,8 @@ export const ProformaCreatePage = () => {
                   targetInvoiceSeriesOptions={createCtrl.targetInvoiceSeriesOptions}
                 />
               </RdxPageStack>
-            </RdxEditorLayout>
+            </RdxEditorPageLayout>
           </RdxPageContainer>
-        </RdxPageFrame>
 
           <SelectCustomerDialog
             ctrl={selectCustomerCtrl.selectCtrl}
@@ -90,5 +85,6 @@ export const ProformaCreatePage = () => {
           <QuickCreateCustomerDialog ctrl={selectCustomerCtrl.createCtrl} />
         </UnsavedChangesProvider>
       </FormProvider>
+    </RdxPageStack>
   );
 };

modules/customer-invoices/src/web/proformas/detail/controllers/use-create-recurring-proforma-from-proforma-dialog-controller.ts

@@ -18,10 +18,10 @@ import { useCreateRecurringProformaFromProforma } from "../../../recurring-profo
 import { buildRecurringProformaDetailPath } from "../../../recurring-proformas/shared/recurring-proforma-navigation";
 
 import {
-  type CreateRecurringProformaFromProformaForm,
-  CreateRecurringProformaFromProformaFormSchema,
   buildCreateRecurringProformaFromProformaDefaultValues,
   buildCreateRecurringProformaFromProformaInput,
+  type CreateRecurringProformaFromProformaForm,
+  CreateRecurringProformaFromProformaFormSchema,
 } from "./use-create-recurring-proforma-from-proforma-dialog-controller.utils";
 
 const normalizeSubmitError = (error: unknown): Error | ValidationErrorCollection => {
@@ -41,9 +41,6 @@ export interface CreateRecurringProformaFromProformaDialogControllerParams {
   proformaReference: string | null;
 }
 
-type CreateRecurringProformaFromProformaTarget =
-  CreateRecurringProformaFromProformaDialogControllerParams;
-
 export const useCreateRecurringProformaFromProformaDialogController = ({
   proformaId,
   proformaReference,
@@ -54,10 +51,6 @@ export const useCreateRecurringProformaFromProformaDialogController = ({
   const mutation = useCreateRecurringProformaFromProforma();
   const [open, setOpen] = useState(false);
   const submitInProgressRef = useRef(false);
-  const targetRef = useRef<CreateRecurringProformaFromProformaTarget>({
-    proformaId,
-    proformaReference,
-  });
   const form = useHookForm<CreateRecurringProformaFromProformaForm>({
     resolverSchema: CreateRecurringProformaFromProformaFormSchema,
     initialValues: buildCreateRecurringProformaFromProformaDefaultValues(proformaReference),
@@ -84,10 +77,8 @@ export const useCreateRecurringProformaFromProformaDialogController = ({
     );
   };
 
-  const openDialog = (target?: CreateRecurringProformaFromProformaTarget) => {
-    const nextTarget = target ?? { proformaId, proformaReference };
-    targetRef.current = nextTarget;
-    form.reset(buildCreateRecurringProformaFromProformaDefaultValues(nextTarget.proformaReference));
+  const openDialog = () => {
+    form.reset(buildCreateRecurringProformaFromProformaDefaultValues(proformaReference));
     setOpen(true);
   };
 
@@ -109,7 +100,7 @@ export const useCreateRecurringProformaFromProformaDialogController = ({
 
       try {
         const created = await mutation.mutateAsync({
-          proformaId: targetRef.current.proformaId,
+          proformaId,
           data: buildCreateRecurringProformaFromProformaInput(values),
         });
 

modules/customer-invoices/src/web/proformas/detail/ui/blocks/proforma-detail-content.tsx

@@ -7,7 +7,7 @@ type ProformaDetailContentProps = {
 
 export const ProformaDetailContent = ({ documentPane, inspector }: ProformaDetailContentProps) => {
   return (
-    <div className="min-h-full lg:h-full lg:min-h-0 lg:overflow-hidden">
+    <div className="min-h-0 flex-1 overflow-auto lg:overflow-hidden ">
       <div className="grid min-h-full grid-cols-1 lg:h-full lg:min-h-0 lg:overflow-hidden lg:grid-cols-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_380px]">
         {documentPane}
         {inspector}

modules/customer-invoices/src/web/proformas/detail/ui/pages/proforma-detail-page.tsx

@@ -1,5 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxPageStack } from "@repo/rdx-ui/components";
 
 import { ChangeProformaStatusDialog } from "../../../change-status";
 import { IssueProformaDialog } from "../../../issue-proforma";
@@ -41,17 +41,14 @@ export const ProformaDetailPage = () => {
   }
 
   return (
-    <RdxPageFrame
-      contentClassName="lg:overflow-hidden"
-      header={
+    <RdxPageStack className="fixed inset-0 min-h-0 overflow-hidden" spacing="none">
       <ProformaDetailHeader
         actions={ctrl.actions}
         header={ctrl.header}
         onBack={ctrl.navigation.navigateBack}
         onExecuteAction={ctrl.handlers.executeAction}
       />
-      }
-    >
+
       <ProformaDetailContent
         documentPane={
           <ProformaDocumentPane
@@ -117,6 +114,6 @@ export const ProformaDetailPage = () => {
         open={ctrl.dialogs.createRecurring.open}
         unit={ctrl.dialogs.createRecurring.unit}
       />
-    </RdxPageFrame>
+    </RdxPageStack>
   );
 };

modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/use-proforma-grid-columns.test.tsx

@@ -1,14 +1,13 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-
-import { RdxRowActions, type RdxRowActionsProps } from "@repo/rdx-ui/components";
-import type { CellContext } from "@tanstack/react-table";
 import { isValidElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
+import type { CellContext } from "@tanstack/react-table";
+
+import { RdxRowActions, type RdxRowActionsProps } from "@repo/rdx-ui/components";
 
 import type { ProformaListRow } from "../../../../shared";
 import { PROFORMA_STATUS } from "../../../../shared";
-
 import { useProformasGridColumns } from "./use-proforma-grid-columns";
 
 const proformaFixture: ProformaListRow = {
@@ -105,16 +104,12 @@ test("mantiene las destructivas en overflow y conserva disabled", () => {
   assert.equal(viewAction?.disabled, true);
 });
 
-test("preserva callbacks de view, edit, crear recurrencia y delete", () => {
+test("preserva callbacks de view, edit y delete", () => {
   let didView = false;
   let didEdit = false;
-  let didCreateRecurring = false;
   let didDelete = false;
 
   const props = getRowActionsProps("normal", {
-    onCreateRecurringClick: () => {
-      didCreateRecurring = true;
-    },
     onDeleteClick: () => {
       didDelete = true;
     },
@@ -128,29 +123,9 @@ test("preserva callbacks de view, edit, crear recurrencia y delete", () => {
 
   props.primaryActions?.find((action) => action.id === "view")?.onSelect();
   props.primaryActions?.find((action) => action.id === "edit")?.onSelect();
-  props.overflowActions?.find((action) => action.id === "create-recurring")?.onSelect();
   props.overflowActions?.find((action) => action.id === "delete")?.onSelect();
 
   assert.equal(didView, true);
   assert.equal(didEdit, true);
-  assert.equal(didCreateRecurring, true);
   assert.equal(didDelete, true);
 });
-
-test("solo permite crear recurrencia desde el listado normal", () => {
-  const normalProps = getRowActionsProps("normal", {
-    onCreateRecurringClick: () => undefined,
-  });
-  const archivedProps = getRowActionsProps("archived", {
-    onCreateRecurringClick: () => undefined,
-  });
-
-  assert.equal(
-    normalProps.overflowActions?.find((action) => action.id === "create-recurring")?.disabled,
-    false
-  );
-  assert.equal(
-    archivedProps.overflowActions?.find((action) => action.id === "create-recurring")?.disabled,
-    true
-  );
-});

modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/use-proforma-grid-columns.tsx

@@ -1,10 +1,12 @@
 import { EmptyCellValue } from "@erp/core/components";
-import { DataTableColumnHeader, type RdxRowAction, RdxRowActions } from "@repo/rdx-ui/components";
+import { DataTableColumnHeader, RdxRowActions, type RdxRowAction } from "@repo/rdx-ui/components";
 import { DateHelper } from "@repo/rdx-utils";
-import { Checkbox, Spinner } from "@repo/shadcn-ui/components";
+import {
+  Checkbox,
+  Spinner,
+} from "@repo/shadcn-ui/components";
 import type { ColumnDef } from "@tanstack/react-table";
 import {
-  CalendarSyncIcon,
   CopyIcon,
   ExternalLinkIcon,
   EyeIcon,
@@ -35,7 +37,6 @@ type GridActionHandlers = {
   onIssueClick?: (proforma: ProformaListRow) => void;
   onArchiveClick?: (proforma: ProformaListRow) => void;
   onDuplicateClick?: (proforma: ProformaListRow) => void;
-  onCreateRecurringClick?: (proforma: ProformaListRow) => void;
   onUnarchiveClick?: (proforma: ProformaListRow) => void;
   onDeleteClick?: (proforma: ProformaListRow) => void;
   onChangeStatusClick?: (proforma: ProformaListRow, nextStatus: ProformaStatus) => void;
@@ -51,8 +52,10 @@ type GridActionHandlers = {
   isPdfDownloading?: boolean;
 };
 
-const renderActionIcon = (Icon: ComponentType<{ className?: string }>, loading?: boolean) =>
-  loading ? <Spinner className="size-4" /> : <Icon className="size-4" />;
+const renderActionIcon = (
+  Icon: ComponentType<{ className?: string }>,
+  loading?: boolean
+) => (loading ? <Spinner className="size-4" /> : <Icon className="size-4" />);
 
 export function useProformasGridColumns(
   scope: ProformaListScope,
@@ -309,7 +312,6 @@ export function useProformasGridColumns(
           const handleView = () => actionHandlers.onViewClick?.(proforma);
           const handleEdit = () => actionHandlers.onEditClick?.(proforma);
           const handleDuplicate = () => actionHandlers.onDuplicateClick?.(proforma);
-          const handleCreateRecurring = () => actionHandlers.onCreateRecurringClick?.(proforma);
           const handleArchive = () => actionHandlers.onArchiveClick?.(proforma);
           const handleUnarchive = () => actionHandlers.onUnarchiveClick?.(proforma);
           const handleIssue = () => actionHandlers.onIssueClick?.(proforma);
@@ -414,14 +416,6 @@ export function useProformasGridColumns(
                 : undefined,
               onSelect: handleDuplicate,
             },
-            {
-              id: "create-recurring",
-              label: t("pages.proformas.list.actions.create_recurring"),
-              icon: renderActionIcon(CalendarSyncIcon),
-              disabled: !(actionHandlers.onCreateRecurringClick && isNormalScope),
-              disabledReason: isNormalScope ? undefined : getScopeReason(),
-              onSelect: handleCreateRecurring,
-            },
             {
               id: "archive",
               label: t("pages.proformas.list.actions.archive"),

modules/customer-invoices/src/web/proformas/list/ui/pages/list-proformas-page.tsx

@@ -32,8 +32,6 @@ import { ChangeProformaStatusDialog } from "../../../change-status";
 import { prepareChangeProformaStatusTargets } from "../../../change-status/utils";
 import { DeleteProformaDialog } from "../../../delete";
 import { prepareDeleteProformaTargets } from "../../../delete/utils";
-import { useCreateRecurringProformaFromProformaDialogController } from "../../../detail/controllers";
-import { CreateRecurringProformaFromProformaDialog } from "../../../detail/ui/components";
 import { downloadProformaPDFApi } from "../../../download-pdf/api";
 import { IssueProformaDialog } from "../../../issue-proforma";
 import { prepareIssueProformaTarget } from "../../../issue-proforma/utils";
@@ -240,10 +238,6 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
     goHome,
     isRetrying,
   } = useListProformasPageController(scope);
-  const createRecurringDialogCtrl = useCreateRecurringProformaFromProformaDialogController({
-    proformaId: "",
-    proformaReference: null,
-  });
 
   const handleEditClick = (proformaId: string) => {
     navigate({
@@ -299,11 +293,6 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
     onViewClick: (proforma) => handleOpenDetailClick(proforma.id),
     onEditClick: (proforma) => handleEditClick(proforma.id),
     onDuplicateClick: handleDuplicateClick,
-    onCreateRecurringClick: (proforma) =>
-      createRecurringDialogCtrl.openDialog({
-        proformaId: proforma.id,
-        proformaReference: proforma.proformaReference,
-      }),
     onIssueClick: (proformaRow) =>
       issueDialogCtrl.openDialog(prepareIssueProformaTarget(proformaRow)),
     onArchiveClick: archiveDialogCtrl.openDialog,
@@ -561,21 +550,6 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
             targets={changeStatusDialogCtrl.targets}
           />
 
-          <CreateRecurringProformaFromProformaDialog
-            form={createRecurringDialogCtrl.form}
-            formId={createRecurringDialogCtrl.formId}
-            isSubmitting={createRecurringDialogCtrl.isSubmitting}
-            onOpenChange={(open) => {
-              if (!open) {
-                createRecurringDialogCtrl.closeDialog();
-              }
-            }}
-            onSubmit={createRecurringDialogCtrl.onSubmit}
-            onUnitChange={createRecurringDialogCtrl.changeUnit}
-            open={createRecurringDialogCtrl.open}
-            unit={createRecurringDialogCtrl.unit}
-          />
-
           <DeleteProformaDialog
             isSubmitting={deleteDialogCtrl.isSubmitting}
             onConfirm={deleteDialogCtrl.confirmDelete}

modules/customer-invoices/src/web/proformas/list/ui/pages/scoped-list-proformas-page-view.tsx

@@ -2,7 +2,6 @@ import { ErrorAlert } from "@erp/core/components";
 import {
   RdxPageActions,
   RdxPageContainer,
-  RdxPageFrame,
   RdxPageHeader,
   RdxPageStack,
 } from "@repo/rdx-ui/components";
@@ -31,7 +30,6 @@ export const ScopedListProformasPageView = ({
   dialogs,
 }: ScopedListProformasPageViewProps) => {
   return (
-    <RdxPageFrame>
     <RdxPageContainer width="full">
       <RdxPageStack spacing="default">
         <RdxPageHeader
@@ -49,6 +47,5 @@ export const ScopedListProformasPageView = ({
 
       {dialogs}
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };

modules/customer-invoices/src/web/proformas/shared/ui/blocks/index.ts

@@ -1,2 +1,3 @@
+export * from "./proforma-layout";
 export * from "./proforma-issuance-readiness-alert";
 export * from "./proforma-page-header";

modules/customer-invoices/src/web/proformas/shared/ui/blocks/proforma-layout.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export function ProformaLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex flex-col h-full w-full" id="proformas ">
+      {children}
+    </div>
+  );
+}

modules/customer-invoices/src/web/proformas/shared/ui/blocks/proforma-page-header.tsx

@@ -1,4 +1,4 @@
-import { RdxEditorHeader } from "@repo/rdx-ui/components";
+import { RdxPageHeader } from "@repo/rdx-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import type { ReactNode } from "react";
 
@@ -26,17 +26,18 @@ export const ProformaPageHeader = ({
   contentClassName,
 }: ProformaPageHeaderProps) => {
   return (
-    <RdxEditorHeader
+    <RdxPageHeader
       actions={actions}
       backLabel={backLabel}
       className={cn("shrink-0", className)}
       contentClassName={contentClassName}
       onBack={onBack}
       showStatus={showStatus}
-      status={statusLabel}
+      statusLabel={statusLabel}
+      sticky
       title={title}
     >
       {children}
-    </RdxEditorHeader>
+    </RdxPageHeader>
   );
 };

modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-editor-form.tsx

@@ -1,5 +1,5 @@
 import type { CustomerSelectionOption } from "@erp/customers";
-import { RdxEditorLayout, type SelectFieldItem } from "@repo/rdx-ui/components";
+import { RdxEditorPageLayout, type SelectFieldItem } from "@repo/rdx-ui/components";
 import { preventEnterKeySubmitForm } from "@repo/rdx-ui/helpers";
 import type { SubmitEventHandler } from "react";
 
@@ -53,7 +53,7 @@ export const ProformaUpdateEditorForm = ({
   className,
 }: ProformaUpdateEditorProps) => {
   return (
-    <RdxEditorLayout
+    <RdxEditorPageLayout
       aside={
         <div className="flex min-w-0 flex-col gap-6">
           <ProformaUpdateRecipientEditor
@@ -75,6 +75,7 @@ export const ProformaUpdateEditorForm = ({
         </div>
       }
       className={className}
+      width="full"
     >
       <div className="min-w-0">
         <form id={formId} noValidate onKeyDown={preventEnterKeySubmitForm} onSubmit={onSubmit}>
@@ -90,6 +91,6 @@ export const ProformaUpdateEditorForm = ({
           </div>
         </form>
       </div>
-    </RdxEditorLayout>
+    </RdxEditorPageLayout>
   );
 };

modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.test.tsx

@@ -52,21 +52,6 @@ test("conecta la alta rápida directa y la alta rápida desde selector con callb
       PercentageField: () => null,
       RdxEditorStickyFooter: () => null,
       RdxPageContainer: ({ children }: { children: ReactNode }) => children,
-      RdxPageFrame: ({
-        children,
-        footer,
-        header,
-      }: {
-        children: ReactNode;
-        footer?: ReactNode;
-        header?: ReactNode;
-      }) => (
-        <>
-          {header}
-          {children}
-          {footer}
-        </>
-      ),
       RdxPageStack: ({ children }: { children: ReactNode }) => children,
       RhfSubmitActionButton: () => null,
     },

modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx

@@ -7,7 +7,6 @@ import {
   RdxBadge,
   RdxEditorActionBar,
   RdxPageContainer,
-  RdxPageFrame,
   RdxPageStack,
   RhfSubmitActionButton,
 } from "@repo/rdx-ui/components";
@@ -95,53 +94,11 @@ export const ProformaUpdatePage = () => {
   }
 
   const hasPageAlerts = updateCtrl.isUpdateError || updateCtrl.isSeriesLoadError;
-  const actionBar = (
-    <RdxEditorActionBar
-      leading={
-        <ProformaCompactTotals
-          currency={updateCtrl.currencyCode}
-          globalDiscountField={
-            <PercentageField
-              className="md:col-span-4 md:col-start-1"
-              disabled={updateCtrl.isUpdating}
-              inputClassName="bg-background"
-              label={t("proformas.update.totals.globalDiscountPercentage", "Descuento global")}
-              name="globalDiscountPercentage"
-            />
-          }
-          showRec={updateCtrl.taxCtrl.hasRecPercentage}
-          showRetention={updateCtrl.taxCtrl.hasRetentionPercentage}
-          totals={updateCtrl.totalsCtrl.totals}
-          variant="embedded"
-        />
-      }
-      primary={
-        <RhfSubmitActionButton
-          busyLabel="Guardando..."
-          disabled={updateCtrl.isUpdating}
-          formId={updateCtrl.formId}
-          isBusy={updateCtrl.form.formState.isSubmitting}
-          label="Guardar"
-        />
-      }
-      secondary={
-        <CancelActionButton
-          disabled={updateCtrl.isUpdating}
-          label="Cancelar"
-          onCancel={handleCancel}
-          variant="outline"
-        />
-      }
-    />
-  );
 
   return (
+    <RdxPageStack className="fixed inset-0 min-h-0 overflow-hidden" spacing="none">
       <FormProvider {...updateCtrl.form}>
         <UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
-        <RdxPageFrame
-          contentClassName="bg-muted/20"
-          footer={actionBar}
-          header={
           <ProformaUpdateHeader
             formId={updateCtrl.formId}
             hasChanges={updateCtrl.form.formState.isDirty}
@@ -183,9 +140,13 @@ export const ProformaUpdatePage = () => {
             //onDuplicate={handleDuplicate}
             //onExportPdf={handleExportPdf}
           />
-          }
+
+          <div className="flex min-h-0 flex-1 flex-col bg-muted/20">
+            <RdxPageContainer
+              className="min-h-0 flex-1 overflow-y-auto"
+              padding="default"
+              width="full"
             >
-          <RdxPageContainer padding="default" width="full">
               {hasPageAlerts ? (
                 <RdxPageContainer className="pb-0" width="full">
                   <RdxPageStack spacing="compact">
@@ -242,7 +203,48 @@ export const ProformaUpdatePage = () => {
                 totalsCtrl={updateCtrl.totalsCtrl}
               />
             </RdxPageContainer>
-        </RdxPageFrame>
+
+            <RdxEditorActionBar
+              leading={
+                <ProformaCompactTotals
+                  currency={updateCtrl.currencyCode}
+                  globalDiscountField={
+                    <PercentageField
+                      className="md:col-span-4 md:col-start-1"
+                      disabled={updateCtrl.isUpdating}
+                      inputClassName="bg-background"
+                      label={t(
+                        "proformas.update.totals.globalDiscountPercentage",
+                        "Descuento global"
+                      )}
+                      name="globalDiscountPercentage"
+                    />
+                  }
+                  showRec={updateCtrl.taxCtrl.hasRecPercentage}
+                  showRetention={updateCtrl.taxCtrl.hasRetentionPercentage}
+                  totals={updateCtrl.totalsCtrl.totals}
+                  variant="embedded"
+                />
+              }
+              primary={
+                <RhfSubmitActionButton
+                  busyLabel="Guardando..."
+                  disabled={updateCtrl.isUpdating}
+                  formId={updateCtrl.formId}
+                  isBusy={updateCtrl.form.formState.isSubmitting}
+                  label="Guardar"
+                />
+              }
+              secondary={
+                <CancelActionButton
+                  disabled={updateCtrl.isUpdating}
+                  label="Cancelar"
+                  onCancel={handleCancel}
+                  variant="outline"
+                />
+              }
+            />
+          </div>
 
           <SelectCustomerDialog
             ctrl={selectCustomerCtrl.selectCtrl}
@@ -264,5 +266,6 @@ export const ProformaUpdatePage = () => {
           />
         </UnsavedChangesProvider>
       </FormProvider>
+    </RdxPageStack>
   );
 };

modules/customer-invoices/src/web/recurring-proformas/create/recurring-proforma-create-page.tsx

@@ -1,10 +1,6 @@
+import { PageFormHeader } from "@erp/core/components";
 import { useHookForm } from "@erp/core/hooks";
-import {
-  RdxEditorHeader,
-  RdxEditorLayout,
-  RdxPageContainer,
-  RdxPageFrame,
-} from "@repo/rdx-ui/components";
+import { RdxEditorPageLayout } from "@repo/rdx-ui/components";
 import {
   Button,
   Card,
@@ -54,10 +50,8 @@ export const RecurringProformaCreatePage = () => {
   });
 
   return (
-    <RdxPageFrame
-      contentClassName="bg-muted/20"
-      header={
-        <RdxEditorHeader
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
+      <PageFormHeader
         actions={
           <div className="flex items-center gap-3">
             <Button
@@ -83,10 +77,8 @@ export const RecurringProformaCreatePage = () => {
         onBack={() => navigate("/recurring-proformas")}
         title={t("recurring_proformas.create.title")}
       />
-      }
-    >
-      <RdxPageContainer width="content">
-        <RdxEditorLayout>
+      <div className="flex-1 overflow-y-auto bg-muted/20">
+        <RdxEditorPageLayout width="simple">
           <form
             className="space-y-6"
             id={RECURRING_PROFORMA_CREATE_FORM_ID}
@@ -137,8 +129,8 @@ export const RecurringProformaCreatePage = () => {
               </CardContent>
             </Card>
           </form>
-        </RdxEditorLayout>
-      </RdxPageContainer>
-    </RdxPageFrame>
+        </RdxEditorPageLayout>
+      </div>
+    </div>
   );
 };

modules/customer-invoices/src/web/recurring-proformas/detail/ui/pages/recurring-proforma-detail-page.tsx

@@ -1,5 +1,10 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxBadge, RdxPageContainer, RdxPageFrame, RdxPageStack } from "@repo/rdx-ui/components";
+import {
+  RdxBadge,
+  RdxEditorPageLayout,
+  RdxPageContainer,
+  RdxPageStack,
+} from "@repo/rdx-ui/components";
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
 import { ArrowLeftIcon } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
@@ -91,8 +96,7 @@ export const RecurringProformaDetailPage = () => {
   });
 
   return (
-    <RdxPageFrame
-      header={
+    <RdxPageStack className="fixed inset-0 min-h-0 overflow-hidden" spacing="none">
       <ProformaPageHeader
         actions={
           <RecurringProformaDetailHeaderActions
@@ -127,14 +131,14 @@ export const RecurringProformaDetailPage = () => {
           </div>
         }
       />
-      }
-    >
-      <RdxPageContainer width="wide">
-        <RdxPageStack spacing="default">
+
+      <RdxPageContainer className="min-h-0 flex-1 overflow-y-auto" padding="none" width="wide">
+        <RdxEditorPageLayout width="simple">
           <RecurringProformaOperationalSummary
             locale={dateLocale}
             recurringProforma={recurringProforma}
           />
+        </RdxEditorPageLayout>
 
         <div className="grid gap-6 xl:grid-cols-2">
           <Card>
@@ -264,8 +268,7 @@ export const RecurringProformaDetailPage = () => {
           <ArrowLeftIcon aria-hidden className="size-4" />
           {t("recurring_proformas.detail.back")}
         </Button>
-        </RdxPageStack>
       </RdxPageContainer>
-    </RdxPageFrame>
+    </RdxPageStack>
   );
 };

modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.test.tsx

@@ -124,7 +124,6 @@ mock.module("./controllers/use-list-recurring-proformas-page-controller", {
 mock.module("@repo/rdx-ui/components", {
   namedExports: {
     RdxPageContainer: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-    RdxPageFrame: ({ children }: { children: ReactNode }) => <div>{children}</div>,
     RdxPageStack: ({ children }: { children: ReactNode }) => <div>{children}</div>,
     RdxPageHeader: ({
       title,

modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.tsx

@@ -16,7 +16,6 @@ import {
   CircleIcon,
   CirclePauseIcon,
   CopyIcon,
-  PencilIcon,
   PlayCircleIcon,
   Trash2Icon,
 } from "lucide-react";
@@ -64,7 +63,6 @@ const actionIcons = {
   complete: CheckCircle2Icon,
   archive: ArchiveIcon,
   duplicate: CopyIcon,
-  edit: PencilIcon,
   delete: Trash2Icon,
 } as const;
 

modules/customer-invoices/src/web/recurring-proformas/list/ui/pages/scoped-list-recurring-proformas-page-view.tsx

@@ -2,7 +2,6 @@ import { ErrorAlert } from "@erp/core/components";
 import {
   RdxPageActions,
   RdxPageContainer,
-  RdxPageFrame,
   RdxPageHeader,
   RdxPageStack,
 } from "@repo/rdx-ui/components";
@@ -29,7 +28,6 @@ export const ScopedListRecurringProformasPageView = ({
   content,
 }: ScopedListRecurringProformasPageViewProps) => {
   return (
-    <RdxPageFrame>
     <RdxPageContainer width="full">
       <RdxPageStack spacing="default">
         <RdxPageHeader
@@ -45,6 +43,5 @@ export const ScopedListRecurringProformasPageView = ({
         {content}
       </RdxPageStack>
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };

modules/customer-invoices/src/web/recurring-proformas/shared/ui/blocks/index.ts

@@ -0,0 +1 @@
+export * from "./recurring-proforma-layout";

modules/customer-invoices/src/web/recurring-proformas/shared/ui/blocks/recurring-proforma-layout.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export function RecurringProformaLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex flex-col h-full w-full" id="recurring_proformas ">
+      {children}
+    </div>
+  );
+}

modules/customers/src/web/create/ui/blocks/customer-create-header.tsx

@@ -1,10 +1,9 @@
-import { PageKeyboardShortcutsButton } from "@erp/core/components";
+import { PageFormHeader, PageKeyboardShortcutsButton } from "@erp/core/components";
 import {
   CancelActionButton,
   FormActionsBar,
   type FormSecondaryAction,
   FormSecondaryActionsMenu,
-  RdxEditorHeader,
   RhfSubmitActionButton,
 } from "@repo/rdx-ui/components";
 import type { ReactNode } from "react";
@@ -75,7 +74,7 @@ export const CustomerCreateHeader = ({
   ];
 
   return (
-    <RdxEditorHeader
+    <PageFormHeader
       actions={
         <FormActionsBar align="end" reverseOnMobile={false}>
           <PageKeyboardShortcutsButton
@@ -114,10 +113,10 @@ export const CustomerCreateHeader = ({
       className={className}
       onBack={onCancel}
       showStatus={hasChanges}
-      status={labels.modified}
+      statusLabel={labels.modified}
       title={labels.title}
     >
       {children}
-    </RdxEditorHeader>
+    </PageFormHeader>
   );
 };

modules/customers/src/web/create/ui/components/customer-editor-skeleton.tsx

@@ -1,4 +1,4 @@
-import { BackHistoryButton, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
 import { Button } from "@repo/shadcn-ui/components";
 
 import { useTranslation } from "../../../i18n";
@@ -6,8 +6,8 @@ import { useTranslation } from "../../../i18n";
 export const CustomerEditorSkeleton = () => {
   const { t } = useTranslation();
   return (
-    <RdxPageFrame>
-      <RdxPageContainer width="content">
+    <>
+      <AppContent>
         <div className="flex items-center justify-between">
           <div aria-hidden="true" className="space-y-2">
             <div className="h-7 w-64 rounded-md bg-muted animate-pulse" />
@@ -26,7 +26,7 @@ export const CustomerEditorSkeleton = () => {
           <div className="h-28 w-full rounded-md bg-muted animate-pulse" />
         </div>
         <span className="sr-only">{t("update.loading")}</span>
-      </RdxPageContainer>
-    </RdxPageFrame>
+      </AppContent>
+    </>
   );
 };

modules/customers/src/web/create/ui/pages/customer-create-page.tsx

@@ -1,6 +1,6 @@
 import { ErrorAlert } from "@erp/core/components";
 import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxEditorPageLayout } from "@repo/rdx-ui/components";
 import { FormProvider } from "react-hook-form";
 
 import { useTranslation } from "../../../i18n";
@@ -19,11 +19,9 @@ export const CustomerCreatePage = () => {
   const handleCancel = () => navigateBack();
 
   return (
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
       <FormProvider {...createCtrl.form}>
         <UnsavedChangesProvider isDirty={createCtrl.form.formState.isDirty}>
-        <RdxPageFrame
-          contentClassName="bg-muted/20"
-          header={
           <CustomerCreateHeader
             formId={createCtrl.formId}
             hasChanges={createCtrl.form.formState.isDirty}
@@ -44,10 +42,9 @@ export const CustomerCreatePage = () => {
             //onDuplicate={handleDuplicate}
             //onExportPdf={handleExportPdf}
           />
-          }
-        >
-          <RdxPageContainer width="content">
-            <RdxEditorLayout>
+
+          <div className="flex-1 overflow-y-auto bg-muted/20">
+            <RdxEditorPageLayout width="simple">
               <div className="rounded-2xl border border-border/60 bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
                 <div className="flex min-w-0 flex-col gap-6">
                   {createCtrl.isCreateError ? (
@@ -68,10 +65,10 @@ export const CustomerCreatePage = () => {
                   />
                 </div>
               </div>
-            </RdxEditorLayout>
-          </RdxPageContainer>
-        </RdxPageFrame>
+            </RdxEditorPageLayout>
+          </div>
         </UnsavedChangesProvider>
       </FormProvider>
+    </div>
   );
 };

modules/customers/src/web/customer-routes.tsx

@@ -2,6 +2,10 @@ import type { ModuleClientParams } from "@erp/core/client";
 import { lazy } from "react";
 import { Outlet, type RouteObject } from "react-router-dom";
 
+// Lazy load components
+const CustomerLayout = lazy(() =>
+  import("./shared/ui").then((m) => ({ default: m.CustomerLayout }))
+);
 const CustomersListPage = lazy(() =>
   import("./list").then((m) => ({ default: m.ListCustomersPage }))
 );
@@ -24,7 +28,11 @@ export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
         layout: "app-sidebar",
         protected: true,
       },
-      element: <Outlet context={params} />,
+      element: (
+        <CustomerLayout>
+          <Outlet context={params} />
+        </CustomerLayout>
+      ),
       children: [
         {
           index: true,
@@ -43,7 +51,11 @@ export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <CustomerCreatePage />,
+      element: (
+        <CustomerLayout>
+          <CustomerCreatePage />
+        </CustomerLayout>
+      ),
     },
 
     {
@@ -52,7 +64,11 @@ export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <CustomerUpdatePage />,
+      element: (
+        <CustomerLayout>
+          <CustomerUpdatePage />
+        </CustomerLayout>
+      ),
     },
 
     {
@@ -61,7 +77,11 @@ export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
         layout: "app-fullscreen",
         protected: true,
       },
-      element: <CustomerViewPage />,
+      element: (
+        <CustomerLayout>
+          <CustomerViewPage />
+        </CustomerLayout>
+      ),
     },
 
     /*

modules/customers/src/web/list/ui/pages/list-customers-page-view.tsx

@@ -2,7 +2,6 @@ import { ErrorAlert } from "@erp/core/components";
 import {
   RdxPageActions,
   RdxPageContainer,
-  RdxPageFrame,
   RdxPageHeader,
   RdxPageStack,
 } from "@repo/rdx-ui/components";
@@ -31,7 +30,6 @@ export const ListCustomersPageView = ({
   dialogs,
 }: ListCustomersPageViewProps) => {
   return (
-    <RdxPageFrame>
     <RdxPageContainer width="full">
       <RdxPageStack spacing="default">
         <RdxPageHeader
@@ -49,6 +47,5 @@ export const ListCustomersPageView = ({
 
       {dialogs}
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };

modules/customers/src/web/list/ui/pages/list-customers-page.tsx

@@ -1,6 +1,6 @@
 import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
 import { useReturnToNavigation } from "@erp/core/hooks";
-import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxPageContainer } from "@repo/rdx-ui/components";
 import {
   Button,
   ResizableHandle,
@@ -14,7 +14,6 @@ import { createSearchParams, useNavigate } from "react-router-dom";
 import { useTranslation } from "../../../i18n";
 import { useListCustomersPageController } from "../../controllers";
 import { CustomerSummaryPanel, CustomersGrid, useCustomersGridColumns } from "../blocks";
-
 import { ListCustomersPageView } from "./list-customers-page-view";
 
 export const ListCustomersPage = () => {
@@ -91,8 +90,8 @@ export const ListCustomersPage = () => {
 
   if (pageError) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <RdxPageContainer width="full">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={pageError.description}
             primaryAction={
@@ -111,8 +110,8 @@ export const ListCustomersPage = () => {
             title={pageError.title}
             variant={pageError.variant}
           />
+        </div>
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 

modules/customers/src/web/shared/ui/blocks/customer-layout.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export const CustomerLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex flex-col h-full w-full" id="customers">
+      {children}
+    </div>
+  );
+};

modules/customers/src/web/shared/ui/blocks/index.ts

@@ -0,0 +1 @@
+export * from "./customer-layout";

modules/customers/src/web/update/ui/blocks/customer-update-header.tsx

@@ -1,10 +1,9 @@
-import { PageKeyboardShortcutsButton } from "@erp/core/components";
+import { PageFormHeader, PageKeyboardShortcutsButton } from "@erp/core/components";
 import {
   CancelActionButton,
   FormActionsBar,
   type FormSecondaryAction,
   FormSecondaryActionsMenu,
-  RdxEditorHeader,
   RhfSubmitActionButton,
 } from "@repo/rdx-ui/components";
 import type { ReactNode } from "react";
@@ -76,7 +75,7 @@ export const CustomerUpdateHeader = ({
   ];
 
   return (
-    <RdxEditorHeader
+    <PageFormHeader
       actions={
         <FormActionsBar align="end" reverseOnMobile={false}>
           <PageKeyboardShortcutsButton
@@ -115,10 +114,10 @@ export const CustomerUpdateHeader = ({
       className={className}
       onBack={onCancel}
       showStatus={hasChanges}
-      status={labels.modified}
+      statusLabel={labels.modified}
       title={labels.title}
     >
       {children}
-    </RdxEditorHeader>
+    </PageFormHeader>
   );
 };

modules/customers/src/web/update/ui/components/customer-editor-skeleton.tsx

@@ -1,4 +1,4 @@
-import { BackHistoryButton, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
 import { Button } from "@repo/shadcn-ui/components";
 
 import { useTranslation } from "../../../i18n";
@@ -6,8 +6,8 @@ import { useTranslation } from "../../../i18n";
 export const CustomerEditorSkeleton = () => {
   const { t } = useTranslation();
   return (
-    <RdxPageFrame>
-      <RdxPageContainer width="content">
+    <>
+      <AppContent>
         <div className="flex items-center justify-between">
           <div aria-hidden="true" className="space-y-2">
             <div className="h-7 w-64 rounded-md bg-muted animate-pulse" />
@@ -26,7 +26,7 @@ export const CustomerEditorSkeleton = () => {
           <div className="h-28 w-full rounded-md bg-muted animate-pulse" />
         </div>
         <span className="sr-only">{t("update.loading")}</span>
-      </RdxPageContainer>
-    </RdxPageFrame>
+      </AppContent>
+    </>
   );
 };

modules/customers/src/web/update/ui/pages/customer-update-page.tsx

@@ -1,6 +1,6 @@
 import { ErrorAlert, PageErrorState } from "@erp/core/components";
 import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxEditorPageLayout } from "@repo/rdx-ui/components";
 import { FormProvider } from "react-hook-form";
 
 import { useTranslation } from "../../../i18n";
@@ -26,8 +26,8 @@ export const CustomerUpdatePage = () => {
 
   if (ctrl.pageError) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <div className="p-4 sm:p-6">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={ctrl.pageError.description}
             primaryAction={
@@ -61,17 +61,15 @@ export const CustomerUpdatePage = () => {
             title={ctrl.pageError.title}
             variant={ctrl.pageError.variant}
           />
-        </RdxPageContainer>
-      </RdxPageFrame>
+        </div>
+      </div>
     );
   }
 
   return (
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
       <FormProvider {...updateCtrl.form}>
         <UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
-        <RdxPageFrame
-          contentClassName="bg-muted/20"
-          header={
           <CustomerUpdateHeader
             formId={updateCtrl.formId}
             hasChanges={updateCtrl.form.formState.isDirty}
@@ -93,10 +91,9 @@ export const CustomerUpdatePage = () => {
             //onDuplicate={handleDuplicate}
             //onExportPdf={handleExportPdf}
           />
-          }
-        >
-          <RdxPageContainer width="content">
-            <RdxEditorLayout>
+
+          <div className="flex-1 overflow-y-auto bg-muted/20">
+            <RdxEditorPageLayout width="simple">
               <div className="rounded-2xl border border-border/60 bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
                 <div className="flex min-w-0 flex-col gap-6">
                   {updateCtrl.isUpdateError ? (
@@ -124,10 +121,10 @@ export const CustomerUpdatePage = () => {
                   />
                 </div>
               </div>
-            </RdxEditorLayout>
-          </RdxPageContainer>
-        </RdxPageFrame>
+            </RdxEditorPageLayout>
+          </div>
         </UnsavedChangesProvider>
       </FormProvider>
+    </div>
   );
 };

modules/customers/src/web/view/ui/blocks/customer-view-header.tsx

@@ -1,10 +1,9 @@
-import { PageKeyboardShortcutsButton } from "@erp/core/components";
+import { PageFormHeader, PageKeyboardShortcutsButton } from "@erp/core/components";
 import {
   CancelActionButton,
   FormActionsBar,
   type FormSecondaryAction,
   FormSecondaryActionsMenu,
-  RdxEditorHeader,
 } from "@repo/rdx-ui/components";
 import type { ReactNode } from "react";
 
@@ -71,7 +70,7 @@ export const CustomerViewHeader = ({
   ];
 
   return (
-    <RdxEditorHeader
+    <PageFormHeader
       actions={
         <FormActionsBar align="end" reverseOnMobile={false}>
           <PageKeyboardShortcutsButton
@@ -102,10 +101,10 @@ export const CustomerViewHeader = ({
       className={className}
       onBack={onCancel}
       showStatus={hasChanges}
-      status={labels.modified}
+      statusLabel={labels.modified}
       title={labels.title}
     >
       {children}
-    </RdxEditorHeader>
+    </PageFormHeader>
   );
 };

modules/customers/src/web/view/ui/pages/customer-view-page.tsx

@@ -1,6 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
 import { useReturnToNavigation } from "@erp/core/hooks";
-import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
 import { Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
 import {
   Banknote,
@@ -36,8 +35,8 @@ export const CustomerViewPage = () => {
 
   if (ctrl.pageError) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <div className="p-4 sm:p-6">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={ctrl.pageError.description}
             primaryAction={
@@ -71,14 +70,13 @@ export const CustomerViewPage = () => {
             title={ctrl.pageError.title}
             variant={ctrl.pageError.variant}
           />
-        </RdxPageContainer>
-      </RdxPageFrame>
+        </div>
+      </div>
     );
   }
 
   return (
-    <RdxPageFrame
-      header={
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
       <CustomerViewHeader
         labels={{
           title: "Ver cliente",
@@ -96,9 +94,8 @@ export const CustomerViewPage = () => {
         //onDuplicate={handleDuplicate}
         //onExportPdf={handleExportPdf}
       />
-      }
-    >
-      <RdxPageContainer className="space-y-6" width="content">
+
+      <div className="flex-1 overflow-y-auto">
         {/* Información Básica */}
         <Card>
           <CardHeader>
@@ -372,7 +369,7 @@ export const CustomerViewPage = () => {
             </div>
           </CardContent>
         </Card>
-      </RdxPageContainer>
-    </RdxPageFrame>
+      </div>
+    </div>
   );
 };

modules/identity/README.md

@@ -88,7 +88,7 @@ Contenido visible actual:
 
 - información personal: `name`, `email`, `language_code`
 - modo `app-fullscreen`, sin sidebar principal
-- contenido centrado mediante `RdxPageContainer` y compuesto con `RdxEditorLayout`
+- contenido centrado con ancho controlado mediante `RdxEditorPageLayout`
 - seguridad mediante dialog para cambio de contraseña
 - cierre de sesión reutilizando el flujo de logout existente
 

modules/identity/src/web/account/ui/pages/account-page-states.tsx

@@ -1,65 +0,0 @@
-import { PageErrorState } from "@erp/core/components";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
-import type { ComponentProps } from "react";
-
-export const AccountLoadingState = ({ label }: { label: string }) => (
-  <RdxPageFrame contentClassName="bg-muted/20">
-    <RdxPageContainer className="min-h-full" width="content">
-      <RdxEditorLayout>
-        <div className="flex min-h-[16rem] items-center justify-center text-sm text-muted-foreground">
-          <div aria-busy="true" role="status">
-            {label}
-          </div>
-        </div>
-      </RdxEditorLayout>
-    </RdxPageContainer>
-  </RdxPageFrame>
-);
-
-interface AccountErrorStateProps {
-  canRetry: boolean;
-  description: string;
-  isRetrying: boolean;
-  onRetry: () => void;
-  reference?: string;
-  retryLabel: string;
-  retryingLabel: string;
-  title: string;
-  variant: ComponentProps<typeof PageErrorState>["variant"];
-}
-
-export const AccountErrorState = ({
-  canRetry,
-  description,
-  isRetrying,
-  onRetry,
-  reference,
-  retryLabel,
-  retryingLabel,
-  title,
-  variant,
-}: AccountErrorStateProps) => (
-  <RdxPageFrame contentClassName="bg-muted/20">
-    <RdxPageContainer width="content">
-      <RdxEditorLayout>
-        <div className="mx-auto w-full max-w-3xl">
-          <PageErrorState
-            description={description}
-            primaryAction={
-              canRetry
-                ? {
-                    label: isRetrying ? retryingLabel : retryLabel,
-                    onClick: onRetry,
-                    isLoading: isRetrying,
-                  }
-                : undefined
-            }
-            reference={reference}
-            title={title}
-            variant={variant}
-          />
-        </div>
-      </RdxEditorLayout>
-    </RdxPageContainer>
-  </RdxPageFrame>
-);

modules/identity/src/web/account/ui/pages/account-page.test.tsx

@@ -1,36 +0,0 @@
-import assert from "node:assert/strict";
-import test from "node:test";
-
-import { renderToStaticMarkup } from "react-dom/server";
-
-import { AccountErrorState, AccountLoadingState } from "./account-page-states";
-
-test("Account loading usa el frame y contenedor definitivos", () => {
-  const html = renderToStaticMarkup(<AccountLoadingState label="Cargando cuenta" />);
-
-  assert.match(html, /flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden/);
-  assert.match(html, /rdx-page-container/);
-  assert.match(html, /Cargando cuenta/);
-  assert.doesNotMatch(html, /fixed inset-0/);
-  assert.doesNotMatch(html, /rdx-editor-page-layout/);
-});
-
-test("Account error permanece dentro del frame actual", () => {
-  const html = renderToStaticMarkup(
-    <AccountErrorState
-      canRetry
-      description="No se pudo cargar la cuenta"
-      isRetrying={false}
-      onRetry={() => undefined}
-      retryingLabel="Reintentando"
-      retryLabel="Reintentar"
-      title="Error de cuenta"
-      variant="server"
-    />
-  );
-
-  assert.match(html, /flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden/);
-  assert.match(html, /Error de cuenta/);
-  assert.match(html, /Reintentar/);
-  assert.doesNotMatch(html, /fixed inset-0/);
-});

modules/identity/src/web/account/ui/pages/account-page.tsx

@@ -1,12 +1,9 @@
-import { ErrorAlert } from "@erp/core/components";
+import { ErrorAlert, PageErrorState, PageFormHeader } from "@erp/core/components";
 import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
 import {
   CancelActionButton,
   RdxEditorActionBar,
-  RdxEditorHeader,
-  RdxEditorLayout,
-  RdxPageContainer,
-  RdxPageFrame,
+  RdxEditorPageLayout,
   RdxPanel,
   RhfSubmitActionButton,
   SelectField,
@@ -29,7 +26,65 @@ import { useTranslation } from "../../../i18n";
 import { useAccountPageController } from "../../controllers";
 import type { AccountPasswordForm, AccountProfileForm } from "../../entities";
 
-import { AccountErrorState, AccountLoadingState } from "./account-page-states";
+const AccountLoadingState = ({ label }: { label: string }) => {
+  return (
+    <div className="flex-1 overflow-y-auto bg-muted/20">
+      <RdxEditorPageLayout className="min-h-full" width="simple">
+        <div className="flex min-h-[16rem] items-center justify-center text-sm text-muted-foreground">
+          <div aria-busy="true" role="status">
+            {label}
+          </div>
+        </div>
+      </RdxEditorPageLayout>
+    </div>
+  );
+};
+
+const AccountErrorState = ({
+  canRetry,
+  description,
+  isRetrying,
+  onRetry,
+  reference,
+  retryLabel,
+  retryingLabel,
+  title,
+  variant,
+}: {
+  canRetry: boolean;
+  description: string;
+  isRetrying: boolean;
+  onRetry: () => void;
+  reference?: string;
+  retryLabel: string;
+  retryingLabel: string;
+  title: string;
+  variant: React.ComponentProps<typeof PageErrorState>["variant"];
+}) => {
+  return (
+    <div className="flex-1 overflow-y-auto bg-muted/20">
+      <RdxEditorPageLayout width="simple">
+        <div className="mx-auto w-full max-w-3xl">
+          <PageErrorState
+            description={description}
+            primaryAction={
+              canRetry
+                ? {
+                    label: isRetrying ? retryingLabel : retryLabel,
+                    onClick: onRetry,
+                    isLoading: isRetrying,
+                  }
+                : undefined
+            }
+            reference={reference}
+            title={title}
+            variant={variant}
+          />
+        </div>
+      </RdxEditorPageLayout>
+    </div>
+  );
+};
 
 const AccountPasswordDialog = ({
   ctrl,
@@ -196,18 +251,15 @@ export const AccountPage = () => {
   };
 
   return (
-    <RdxPageFrame
-      contentClassName="bg-muted/20"
-      header={
-        <RdxEditorHeader
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
+      <PageFormHeader
         backLabel={t("account.header.back")}
         onBack={navigateBack}
         title={t("account.title")}
       />
-      }
-    >
-      <RdxPageContainer width="content">
-        <RdxEditorLayout>
+
+      <div className="flex-1 overflow-y-auto bg-muted/20">
+        <RdxEditorPageLayout width="simple">
           <div className="rounded-2xl border border-border/60 bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
             <div className="flex min-w-0 flex-col gap-6">
               <FormProvider {...ctrl.profileForm}>
@@ -352,8 +404,8 @@ export const AccountPage = () => {
               </RdxPanel>
             </div>
           </div>
-        </RdxEditorLayout>
-      </RdxPageContainer>
+        </RdxEditorPageLayout>
+      </div>
 
       <AccountPasswordDialog
         ctrl={ctrl}
@@ -362,6 +414,6 @@ export const AccountPage = () => {
         onOpenChange={handlePasswordDialogOpenChange}
         t={t}
       />
-    </RdxPageFrame>
+    </div>
   );
 };

modules/suppliers/src/web/create/supplier-create-page.tsx

@@ -1,6 +1,6 @@
 import { ErrorAlert } from "@erp/core/components";
 import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxEditorPageLayout } from "@repo/rdx-ui/components";
 import { FormProvider } from "react-hook-form";
 import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
 
@@ -24,11 +24,9 @@ export const SupplierCreatePage = () => {
   });
 
   return (
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
       <FormProvider {...controller.form}>
         <UnsavedChangesProvider isDirty={controller.form.formState.isDirty}>
-        <RdxPageFrame
-          contentClassName="bg-muted/20"
-          header={
           <SupplierEditorHeader
             formId={controller.formId}
             hasChanges={controller.form.formState.isDirty}
@@ -36,10 +34,8 @@ export const SupplierCreatePage = () => {
             onCancel={navigateBack}
             title={t("create.title")}
           />
-          }
-        >
-          <RdxPageContainer width="content">
-            <RdxEditorLayout>
+          <div className="flex-1 overflow-y-auto bg-muted/20">
+            <RdxEditorPageLayout width="simple">
               <div className="rounded-2xl border border-border/60 bg-background p-4 shadow-xs md:p-6">
                 <div className="flex min-w-0 flex-col gap-6">
                   {controller.mutation.isError ? (
@@ -55,10 +51,10 @@ export const SupplierCreatePage = () => {
                   />
                 </div>
               </div>
-            </RdxEditorLayout>
-          </RdxPageContainer>
-        </RdxPageFrame>
+            </RdxEditorPageLayout>
+          </div>
         </UnsavedChangesProvider>
       </FormProvider>
+    </div>
   );
 };

modules/suppliers/src/web/list/ui/suppliers-list-page.tsx

@@ -2,7 +2,6 @@ import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
 import {
   RdxPageActions,
   RdxPageContainer,
-  RdxPageFrame,
   RdxPageHeader,
   RdxPageStack,
 } from "@repo/rdx-ui/components";
@@ -37,8 +36,7 @@ export const SuppliersListPage = () => {
 
   if (controller.isError && controller.data.items.length === 0) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <RdxPageContainer width="full">
         <PageErrorState
           description={t("list.error.description")}
           primaryAction={{
@@ -51,12 +49,10 @@ export const SuppliersListPage = () => {
           variant="unknown"
         />
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 
   return (
-    <RdxPageFrame>
     <RdxPageContainer width="full">
       <RdxPageStack spacing="default">
         <RdxPageHeader
@@ -98,6 +94,5 @@ export const SuppliersListPage = () => {
         />
       </RdxPageStack>
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };

modules/suppliers/src/web/shared/ui/index.ts

@@ -1,4 +1,5 @@
 export * from "./supplier-editor-form";
 export * from "./supplier-editor-header";
 export * from "./supplier-editor-skeleton";
+export * from "./supplier-layout";
 export * from "./supplier-status-badge";

modules/suppliers/src/web/shared/ui/supplier-editor-header.tsx

@@ -1,10 +1,5 @@
-import { PageKeyboardShortcutsButton } from "@erp/core/components";
-import {
-  CancelActionButton,
-  FormActionsBar,
-  RdxEditorHeader,
-  RhfSubmitActionButton,
-} from "@repo/rdx-ui/components";
+import { PageFormHeader, PageKeyboardShortcutsButton } from "@erp/core/components";
+import { CancelActionButton, FormActionsBar, RhfSubmitActionButton } from "@repo/rdx-ui/components";
 
 import { useTranslation } from "../../i18n";
 
@@ -24,7 +19,7 @@ export const SupplierEditorHeader = ({
   const { t } = useTranslation();
 
   return (
-    <RdxEditorHeader
+    <PageFormHeader
       actions={
         <FormActionsBar align="end" reverseOnMobile={false}>
           <PageKeyboardShortcutsButton
@@ -54,7 +49,7 @@ export const SupplierEditorHeader = ({
       backLabel={t("common.actions.back")}
       onBack={onCancel}
       showStatus={hasChanges}
-      status={t("form.modified")}
+      statusLabel={t("form.modified")}
       title={title}
     />
   );

modules/suppliers/src/web/shared/ui/supplier-editor-skeleton.tsx

@@ -1,4 +1,4 @@
-import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { AppContent } from "@repo/rdx-ui/components";
 
 import { useTranslation } from "../../i18n";
 
@@ -17,8 +17,7 @@ export const SupplierEditorSkeleton = () => {
   const { t } = useTranslation();
 
   return (
-    <RdxPageFrame>
-      <RdxPageContainer width="content">
+    <AppContent>
       <div aria-hidden className="space-y-6">
         <div className="h-10 w-64 animate-pulse rounded-md bg-muted" />
         <div className="grid gap-4 md:grid-cols-2">
@@ -28,7 +27,6 @@ export const SupplierEditorSkeleton = () => {
         </div>
       </div>
       <span className="sr-only">{t("common.loading")}</span>
-      </RdxPageContainer>
-    </RdxPageFrame>
+    </AppContent>
   );
 };

modules/suppliers/src/web/shared/ui/supplier-layout.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react";
+
+export const SupplierLayout = ({ children }: PropsWithChildren) => (
+  <div className="flex h-full w-full flex-col" id="suppliers">
+    {children}
+  </div>
+);

modules/suppliers/src/web/supplier-routes.tsx

@@ -2,6 +2,9 @@ import type { ModuleClientParams } from "@erp/core/client";
 import { lazy } from "react";
 import { Outlet, type RouteObject } from "react-router-dom";
 
+const SupplierLayout = lazy(() =>
+  import("./shared/ui").then((module) => ({ default: module.SupplierLayout }))
+);
 const SuppliersListPage = lazy(() =>
   import("./list").then((module) => ({ default: module.SuppliersListPage }))
 );
@@ -19,22 +22,38 @@ export const SupplierRoutes = (params: ModuleClientParams): RouteObject[] => [
   {
     path: "suppliers",
     handle: { layout: "app-sidebar", protected: true },
-    element: <Outlet context={params} />,
+    element: (
+      <SupplierLayout>
+        <Outlet context={params} />
+      </SupplierLayout>
+    ),
     children: [{ index: true, element: <SuppliersListPage /> }],
   },
   {
     path: "suppliers/create",
     handle: { layout: "app-fullscreen", protected: true },
-    element: <SupplierCreatePage />,
+    element: (
+      <SupplierLayout>
+        <SupplierCreatePage />
+      </SupplierLayout>
+    ),
   },
   {
     path: "suppliers/:id/edit",
     handle: { layout: "app-fullscreen", protected: true },
-    element: <SupplierUpdatePage />,
+    element: (
+      <SupplierLayout>
+        <SupplierUpdatePage />
+      </SupplierLayout>
+    ),
   },
   {
     path: "suppliers/:id",
     handle: { layout: "app-fullscreen", protected: true },
-    element: <SupplierDetailPage />,
+    element: (
+      <SupplierLayout>
+        <SupplierDetailPage />
+      </SupplierLayout>
+    ),
   },
 ];

modules/suppliers/src/web/update/supplier-update-page.tsx

@@ -1,6 +1,6 @@
 import { ErrorAlert, PageErrorState } from "@erp/core/components";
 import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxEditorPageLayout, RdxPageContainer } from "@repo/rdx-ui/components";
 import { FormProvider } from "react-hook-form";
 import { createSearchParams, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
@@ -28,8 +28,7 @@ export const SupplierUpdatePage = () => {
 
   if (controller.query.isError || !controller.query.data) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <RdxPageContainer width="full">
         <PageErrorState
           description={t("detail.error.description")}
           primaryAction={{
@@ -43,16 +42,13 @@ export const SupplierUpdatePage = () => {
           variant="notFound"
         />
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 
   return (
+    <div className="fixed inset-0 flex flex-col overflow-hidden">
       <FormProvider {...controller.form}>
         <UnsavedChangesProvider isDirty={controller.form.formState.isDirty}>
-        <RdxPageFrame
-          contentClassName="bg-muted/20"
-          header={
           <SupplierEditorHeader
             formId={controller.formId}
             hasChanges={controller.form.formState.isDirty}
@@ -60,10 +56,8 @@ export const SupplierUpdatePage = () => {
             onCancel={navigateBack}
             title={t("update.title")}
           />
-          }
-        >
-          <RdxPageContainer width="content">
-            <RdxEditorLayout>
+          <div className="flex-1 overflow-y-auto bg-muted/20">
+            <RdxEditorPageLayout width="simple">
               <div className="rounded-2xl border border-border/60 bg-background p-4 shadow-xs md:p-6">
                 <div className="flex min-w-0 flex-col gap-6">
                   {controller.mutation.isError ? (
@@ -79,10 +73,10 @@ export const SupplierUpdatePage = () => {
                   />
                 </div>
               </div>
-            </RdxEditorLayout>
-          </RdxPageContainer>
-        </RdxPageFrame>
+            </RdxEditorPageLayout>
+          </div>
         </UnsavedChangesProvider>
       </FormProvider>
+    </div>
   );
 };

modules/suppliers/src/web/view/supplier-detail-page.tsx

@@ -3,7 +3,6 @@ import { useReturnToNavigation } from "@erp/core/hooks";
 import {
   RdxPageActions,
   RdxPageContainer,
-  RdxPageFrame,
   RdxPageHeader,
   RdxPageStack,
 } from "@repo/rdx-ui/components";
@@ -36,8 +35,7 @@ export const SupplierDetailPage = () => {
 
   if (query.isError || !query.data) {
     return (
-      <RdxPageFrame>
-        <RdxPageContainer width="content">
+      <RdxPageContainer width="full">
         <PageErrorState
           description={t("detail.error.description")}
           primaryAction={{
@@ -51,7 +49,6 @@ export const SupplierDetailPage = () => {
           variant="notFound"
         />
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 
@@ -59,9 +56,8 @@ export const SupplierDetailPage = () => {
   const context = supplier.reference || supplier.tin || supplier.tradeName || "-";
 
   return (
-    <RdxPageFrame
-      header={
     <RdxPageContainer width="full">
+      <RdxPageStack spacing="default">
         <RdxPageHeader
           actions={
             <RdxPageActions
@@ -93,11 +89,7 @@ export const SupplierDetailPage = () => {
             </span>
           }
         />
-        </RdxPageContainer>
-      }
-    >
-      <RdxPageContainer width="full">
-        <RdxPageStack spacing="default">
+
         <div className="grid gap-4 lg:grid-cols-2">
           <Card>
             <CardHeader>
@@ -130,15 +122,9 @@ export const SupplierDetailPage = () => {
             <CardContent>
               <dl className="grid gap-4 sm:grid-cols-2">
                 <DetailField label={t("fields.primary_email")} value={supplier.primaryEmail} />
-                  <DetailField
-                    label={t("fields.secondary_email")}
-                    value={supplier.secondaryEmail}
-                  />
+                <DetailField label={t("fields.secondary_email")} value={supplier.secondaryEmail} />
                 <DetailField label={t("fields.primary_phone")} value={supplier.primaryPhone} />
-                  <DetailField
-                    label={t("fields.secondary_phone")}
-                    value={supplier.secondaryPhone}
-                  />
+                <DetailField label={t("fields.secondary_phone")} value={supplier.secondaryPhone} />
                 <DetailField label={t("fields.primary_mobile")} value={supplier.primaryMobile} />
                 <DetailField
                   label={t("fields.secondary_mobile")}
@@ -186,6 +172,5 @@ export const SupplierDetailPage = () => {
         </div>
       </RdxPageStack>
     </RdxPageContainer>
-    </RdxPageFrame>
   );
 };

packages/rdx-ui/src/components/editor-page/index.ts

@@ -1,4 +1,3 @@
 export * from "./rdx-editor-action-bar.tsx";
-export * from "./rdx-editor-header.tsx";
-export * from "./rdx-editor-layout.tsx";
+export * from "./rdx-editor-page-layout.tsx";
 export * from "./rdx-panel.tsx";

packages/rdx-ui/src/components/editor-page/rdx-editor-action-bar.tsx

@@ -10,7 +10,7 @@ export interface RdxEditorActionBarProps extends Omit<ComponentPropsWithoutRef<"
 }
 
 /**
- * Barra inferior de acciones de un editor.
+ * Barra inferior de acciones de una pantalla de edición.
  *
  * Puede mostrar:
  * - contenido auxiliar a la izquierda

packages/rdx-ui/src/components/editor-page/rdx-editor-foundations.test.tsx

@@ -6,49 +6,47 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { RdxFormGrid } from "../form/rdx-form-grid.tsx";
 
 import { RdxEditorActionBar } from "./rdx-editor-action-bar.tsx";
-import { RdxEditorHeader } from "./rdx-editor-header.tsx";
-import { RdxEditorLayout } from "./rdx-editor-layout.tsx";
-
-test("RdxEditorLayout only distributes main content and an optional aside", () => {
-  const html = renderToStaticMarkup(
-    <RdxEditorLayout aside={<span>Aside</span>}>Main</RdxEditorLayout>
-  );
-
-  assert.match(html, /grid/);
-  assert.match(html, /<aside/);
-  assert.doesNotMatch(html, /overflow/);
-  assert.doesNotMatch(html, /px-4/);
-});
-
-test("RdxEditorHeader renderiza navegación, título, estado, acciones y contenido contextual", () => {
-  const html = renderToStaticMarkup(
-    <RdxEditorHeader
-      actions={<span>Actions</span>}
-      backLabel="Volver"
-      onBack={() => undefined}
-      status="Modificada"
-      title="Editar proforma"
-    >
-      <div>Secondary content</div>
-    </RdxEditorHeader>
-  );
-
-  assert.match(html, /aria-label="Volver"/);
-  assert.match(html, /<h1[^>]*>Editar proforma<\/h1>/);
-  assert.match(html, /Modificada/);
-  assert.match(html, /Actions/);
-  assert.match(html, /Secondary content/);
-  assert.doesNotMatch(html, /sticky top-0/);
-});
-
-test("RdxEditorHeader no renderiza back sin callback", () => {
-  const html = renderToStaticMarkup(<RdxEditorHeader backLabel="Volver" title="Detalle" />);
-
-  assert.doesNotMatch(html, /aria-label="Volver"/);
-});
-
+import { RdxEditorPageLayout } from "./rdx-editor-page-layout.tsx";
 import { RdxPanel } from "./rdx-panel.tsx";
 
+test("RdxEditorPageLayout aplica complejidad simple por defecto y renderiza children", () => {
+  const html = renderToStaticMarkup(
+    <RdxEditorPageLayout>
+      <div>Editor content</div>
+    </RdxEditorPageLayout>
+  );
+
+  assert.match(html, /Editor content/);
+  assert.match(html, /max-w-5xl/);
+  assert.match(html, /px-4/);
+  assert.match(html, /md:px-6/);
+});
+
+test("RdxEditorPageLayout soporta aside opcional y complejidad complex", () => {
+  const html = renderToStaticMarkup(
+    <RdxEditorPageLayout aside={<div>Aside content</div>} width="full">
+      <div>Main content</div>
+    </RdxEditorPageLayout>
+  );
+
+  assert.match(html, /Main content/);
+  assert.match(html, /Aside content/);
+  assert.match(html, /xl:grid-cols-\[minmax\(0,1fr\)_22rem\]/);
+  assert.doesNotMatch(html, /max-w-5xl/);
+});
+
+test("RdxEditorPageLayout no reserva aside cuando no existe incluso en complex", () => {
+  const html = renderToStaticMarkup(
+    <RdxEditorPageLayout width="full">
+      <div>Main content</div>
+    </RdxEditorPageLayout>
+  );
+
+  assert.match(html, /Main content/);
+  assert.doesNotMatch(html, /<aside/);
+  assert.doesNotMatch(html, /grid-cols-\[/);
+});
+
 test("RdxPanel plain renderiza header semántico y contenido sin card", () => {
   const html = renderToStaticMarkup(
     <RdxPanel

packages/rdx-ui/src/components/editor-page/rdx-editor-layout.tsx

@@ -1,31 +0,0 @@
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-
-export interface RdxEditorLayoutProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-  children: ReactNode;
-  aside?: ReactNode;
-}
-
-/**
- * Distribuye el contenido interno de un editor entre una región principal
- * y un aside opcional.
- */
-export const RdxEditorLayout = ({ children, aside, className, ...props }: RdxEditorLayoutProps) => {
-  if (!aside) {
-    return (
-      <div className={cn("min-w-0", className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn("grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1fr)_22rem]", className)}
-      {...props}
-    >
-      <div className="min-w-0">{children}</div>
-      <aside className="min-w-0">{aside}</aside>
-    </div>
-  );
-};

packages/rdx-ui/src/components/editor-page/rdx-editor-page-layout.tsx

@@ -0,0 +1,56 @@
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type RdxEditorWidth = "wide" | "full";
+
+export interface RdxEditorPageLayoutProps
+  extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  children: ReactNode;
+  aside?: ReactNode;
+  width?: RdxEditorWidth;
+}
+
+const CONTENT_WIDTH_CLASSNAME: Record<RdxEditorWidth, string> = {
+  wide: "mx-auto w-full max-w-5xl",
+  full: "w-full",
+};
+
+const ASIDE_GRID_CLASSNAME: Record<RdxEditorWidth, string> = {
+  wide: "xl:grid-cols-[minmax(0,1fr)_280px]",
+  full: "xl:grid-cols-[minmax(0,1fr)_22rem]",
+};
+
+/**
+ * Distribuye el contenido interno de un contenedor en:
+ *
+ * - una región principal
+ * - un aside opcional.
+ *
+ * No controla padding, scroll ni estructura general de página.
+ */
+
+export const RdxEditorPageLayout = ({
+  children,
+  aside,
+  width = "wide",
+  className,
+  ...props
+}: RdxEditorPageLayoutProps) => {
+  const contentClassName = CONTENT_WIDTH_CLASSNAME[width];
+
+  return (
+    <div
+      className={cn("rdx-editor-page-layout min-w-0 w-full px-4 py-4 md:px-6 md:py-6", className)}
+      {...props}
+    >
+      {aside ? (
+        <div className={cn(contentClassName, "grid min-w-0 gap-6", ASIDE_GRID_CLASSNAME[width])}>
+          <div className="min-w-0">{children}</div>
+          <aside className="min-w-0">{aside}</aside>
+        </div>
+      ) : (
+        <div className={cn("min-w-0", contentClassName)}>{children}</div>
+      )}
+    </div>
+  );
+};

packages/rdx-ui/src/components/editor-page/rdx-panel.tsx

@@ -43,6 +43,7 @@ export const RdxPanel = ({
   ...props
 }: RdxPanelProps) => {
   const titleId = useId();
+  const hasHeader = Boolean(title || description || icon || actions);
 
   return (
     <section
@@ -50,6 +51,7 @@ export const RdxPanel = ({
       className={cn(VARIANT_CLASSNAME[variant], className)}
       {...props}
     >
+      {hasHeader ? (
         <div className={cn("flex flex-col gap-4", variant === "plain" ? "pb-4" : "pb-5")}>
           <div className="flex items-start justify-between gap-4">
             <div className="flex min-w-0 items-start gap-3">
@@ -67,13 +69,16 @@ export const RdxPanel = ({
                   {title}
                 </h2>
 
-              {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+                {description ? (
+                  <p className="text-sm text-muted-foreground">{description}</p>
+                ) : null}
               </div>
             </div>
 
             {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
           </div>
         </div>
+      ) : null}
 
       <div className="min-w-0">{children}</div>
     </section>

packages/rdx-ui/src/components/layout/index.ts

@@ -3,6 +3,5 @@ export * from "./app-header.tsx";
 export * from "./app-layout.tsx";
 export * from "./rdx-page-actions.tsx";
 export * from "./rdx-page-container.tsx";
-export * from "./rdx-page-frame.tsx";
 export * from "./rdx-page-header.tsx";
 export * from "./rdx-page-stack.tsx";

packages/rdx-ui/src/components/layout/rdx-page-foundations.test.tsx

@@ -1,27 +1,12 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-
 import { renderToStaticMarkup } from "react-dom/server";
 
 import { RdxPageActions } from "./rdx-page-actions.tsx";
 import { RdxPageContainer } from "./rdx-page-container.tsx";
-import { RdxPageFrame } from "./rdx-page-frame.tsx";
 import { RdxPageHeader } from "./rdx-page-header.tsx";
 import { RdxPageStack } from "./rdx-page-stack.tsx";
 
-test("RdxPageFrame separates fixed regions from the scrollable content", () => {
-  const html = renderToStaticMarkup(
-    <RdxPageFrame footer={<span>Footer</span>} header={<span>Header</span>}>
-      Content
-    </RdxPageFrame>
-  );
-
-  assert.match(html, /overflow-hidden/);
-  assert.match(html, /overflow-y-auto/);
-  assert.ok(html.indexOf("Header") < html.indexOf("Content"));
-  assert.ok(html.indexOf("Content") < html.indexOf("Footer"));
-});
-
 test("RdxPageContainer renders children with full width by default", () => {
   const html = renderToStaticMarkup(<RdxPageContainer>Content</RdxPageContainer>);
 
@@ -106,6 +91,29 @@ test("RdxPageHeader omits optional wrappers when content is absent", () => {
   assert.doesNotMatch(html, /Metadata/);
 });
 
+test("RdxPageHeader soporta el modo sticky de editor con navegación, estado y contenido secundario", () => {
+  const html = renderToStaticMarkup(
+    <RdxPageHeader
+      actions={<span>Actions</span>}
+      backLabel="Volver"
+      onBack={() => undefined}
+      showStatus
+      statusLabel="Modificada"
+      sticky
+      title="Editar proforma"
+    >
+      <div>Secondary content</div>
+    </RdxPageHeader>
+  );
+
+  assert.match(html, /sticky top-0/);
+  assert.match(html, /aria-label="Volver"/);
+  assert.match(html, /Editar proforma/);
+  assert.match(html, /Modificada/);
+  assert.match(html, /Actions/);
+  assert.match(html, /Secondary content/);
+});
+
 test("RdxPageActions renders only populated regions in the expected order", () => {
   const html = renderToStaticMarkup(
     <RdxPageActions

packages/rdx-ui/src/components/layout/rdx-page-frame.tsx

@@ -1,35 +0,0 @@
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-
-export interface RdxPageFrameProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-  children: ReactNode;
-  header?: ReactNode;
-  footer?: ReactNode;
-  contentClassName?: string;
-}
-
-/**
- * Estructura una página en cabecera, contenido scrollable y pie opcional.
- * Centraliza el control del scroll principal de la página.
- */
-export const RdxPageFrame = ({
-  children,
-  header,
-  footer,
-  contentClassName,
-  className,
-  ...props
-}: RdxPageFrameProps) => {
-  return (
-    <div
-      className={cn("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className)}
-      {...props}
-    >
-      {header ? <div className="shrink-0">{header}</div> : null}
-      <div className={cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName)}>
-        {children}
-      </div>
-      {footer ? <div className="shrink-0">{footer}</div> : null}
-    </div>
-  );
-};

packages/rdx-ui/src/components/layout/rdx-page-header.tsx

@@ -1,6 +1,10 @@
+import { Button } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
+import { ArrowLeftIcon } from "lucide-react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
+import { RdxBadge } from "../rdx-badge.tsx";
+
 export interface RdxPageHeaderProps
   extends Omit<ComponentPropsWithoutRef<"header">, "children" | "title"> {
   title: ReactNode;
@@ -8,13 +12,27 @@ export interface RdxPageHeaderProps
   leading?: ReactNode;
   metadata?: ReactNode;
   actions?: ReactNode;
+  backLabel?: string;
+  onBack?: () => void;
+  statusLabel?: ReactNode;
+  showStatus?: boolean;
+  sticky?: boolean;
+  contentClassName?: string;
   children?: ReactNode;
 }
 
 /**
  * Cabecera estándar de una página.
  *
- * Presenta título, descripción, metadata y acciones.
+ * Muestra:
+ * - navegación de retorno opcional
+ * - título
+ * - descripción o metadata opcional
+ * - estado opcional
+ * - acciones de página
+ *
+ * Puede permanecer fija dentro de un contenedor scrollable
+ * mediante `sticky`.
  */
 
 export const RdxPageHeader = ({
@@ -23,10 +41,73 @@ export const RdxPageHeader = ({
   leading,
   metadata,
   actions,
+  backLabel,
+  onBack,
+  statusLabel,
+  showStatus = false,
+  sticky = false,
+  contentClassName,
   children,
   className,
   ...props
 }: RdxPageHeaderProps) => {
+  if (sticky) {
+    const shouldRenderBackButton = Boolean(backLabel || onBack);
+
+    return (
+      <header
+        className={cn(
+          "sticky top-0 z-50 shrink-0 bg-background ring-1 ring-foreground/10 shadow-xs",
+          className
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            "flex min-h-14 items-center justify-between gap-6 border-b px-4 py-2 sm:px-6 md:min-h-18",
+            contentClassName
+          )}
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            {shouldRenderBackButton ? (
+              <Button
+                aria-label={backLabel}
+                disabled={!onBack}
+                onClick={onBack}
+                size="icon"
+                type="button"
+                variant="ghost"
+              >
+                <ArrowLeftIcon aria-hidden="true" className="size-5" />
+              </Button>
+            ) : null}
+
+            <div className="flex min-w-0 items-center gap-4">
+              <h1 className="min-w-0 truncate text-xl font-semibold tracking-tight text-foreground lg:text-2xl">
+                {title}
+              </h1>
+
+              {statusLabel ? (
+                <RdxBadge
+                  className={cn(
+                    "border-amber-500 bg-amber-200 text-amber-900 transition-opacity duration-200",
+                    showStatus ? "opacity-100" : "pointer-events-none opacity-0"
+                  )}
+                >
+                  {statusLabel}
+                </RdxBadge>
+              ) : null}
+            </div>
+          </div>
+
+          {actions ? <div className="flex items-center gap-4">{actions}</div> : null}
+        </div>
+
+        {children}
+      </header>
+    );
+  }
+
   return (
     <header
       className={cn(

packages/rdx-ui/src/components/layout/rdx-page-stack.tsx

@@ -16,8 +16,8 @@ const SPACING_CLASSNAME: Record<RdxPageStackSpacing, string> = {
 };
 
 /**
- * Apila contenido verticalmente aplicando un espaciado consistente.
- * No controla viewport, scroll ni estructura de página.
+ * Contenedor para layout para apilar contenido verticalmente.
+ * No proporciona estructura de página ni controla scroll.
  */
 
 export const RdxPageStack = ({