fix: [TESIS-132] keep the page wrapper padding when a screen passes sx

[LauAubert]

🔗 Link

https://proyectofinalfrlp.atlassian.net/browse/TESIS-132

📝 Descripción

Inventario, Órdenes, Nueva orden (pasos 1 y 2) y Modificar orden se veían sin padding ni centrado: el contenido quedaba pegado al sidebar y a la barra superior, y en Inventario el label del buscador aparecía cortado. La causa era que PageWrapper pasaba {...props} después de su propio sx, así que cuando una pantalla le mandaba sx={{ maxWidth: 1400 }} ese sx reemplazaba al base completo en vez de sumarse. Ahora el sx de quien lo usa se agrega después del base, que es como MUI compone un sx (que también puede llegar como array). Así se arreglan las 5 pantallas sin tocar ninguna.

Con el padding de vuelta quedó a la vista un segundo problema: en Inventario y Órdenes el buscador y el botón de alta no quedaban contra el borde derecho, y en el wizard de nueva orden el botón de avanzar tampoco. Stack separa a sus hijos con margin-left salvo que tenga useFlexGap, y esa regla pisa el ml: 'auto' del hijo. Con useFlexGap la separación pasa a ser gap y el ml: 'auto' vuelve a funcionar.

🛠️ Cambios realizados

• Corrige PageWrapper para que combine el sx recibido con sus estilos base (padding, maxWidth, mx: 'auto', width) en vez de reemplazarlos.
• Agrega useFlexGap al encabezado de InventoryPage y OrdersPage y al pie de NewOrderPage y ShippingStepPage, para que las acciones y el botón de avanzar queden alineados a la derecha.
• Agrega PageWrapper.test.tsx: cubre el caso por defecto, un override de maxWidth que conserva el centrado y un sx en forma de array. Los dos últimos fallan con el código anterior.

🧪 Cómo probarlo (Opcional)

Caso 1: Inventario

Precondición: la API está corriendo y hay una sesión iniciada (por ejemplo admin@norte.com).

1. Navegar a /inventory.
   → El título, el buscador y la tabla quedan separados del sidebar y de la barra superior, el label "Buscar productos" se ve completo y el buscador y "Nuevo producto" quedan contra el borde derecho.

Caso 2: resto de las pantallas afectadas

1. Navegar a /orders, /orders/new y /orders/edit/1.
   → Tienen el mismo padding que Inicio o Reportes. En /orders el buscador y "Crear orden" quedan a la derecha, y en /orders/new el botón "Siguiente" queda al final de la fila.

📸 Evidencia (Opcional)

Pantalla	Antes	Después
Inventario
Órdenes
Nueva orden
Modificar orden

Capturas a 1440×810 con admin@norte.com. La de Nueva orden después es de página completa para que se vea el botón «Siguiente» del pie. El paso 2 del wizard no tiene captura: sin una orden empezada redirige al paso 1.

¿Afecta la arquitectura o genera un nuevo patrón?
No

---

🤖 Generated with Claude Code

[TomasMartin2004]

Revisión — TESIS-132 (PR #55) · PageWrapper deja de perder sus estilos base

Revisado sobre TESIS-132-page-wrapper-keeps-base-styles contra origin/master. npm run lint, npm run test y npm run build limpios.

✅ El diagnóstico es exacto y el arreglo es el idiomático

{...props} después del sx propio hacía que el sx del llamador reemplazara el objeto entero, no que se fusionara. Pasar a la forma de array —base primero, lo del llamador después— es como MUI compone sx, y de paso soporta que llegue como array, que es lo que el tipo permite.

Detalle que está bien resuelto y es fácil de pasar por alto: al desestructurar sx fuera de props, el spread ya no puede volver a pisarlo. Sin eso, el orden {...props} antes del sx habría reintroducido el bug por otro camino.

✅ Cinco pantallas arregladas sin tocar ninguna

Confirmado: los cinco llamadores con sx={{ maxWidth: 1400 }} son exactamente los afectados.

InventoryPage.tsx:168      NewOrderPage.tsx:85       OrderEditPage.tsx:68
OrdersPage.tsx:94          ShippingStepPage.tsx:130

Arreglar el componente en vez de las cinco pantallas es lo correcto, y explica por qué el diff es tan chico para cuatro capturas de «antes».

✅ Los tres ejemplos tienen dientes

Volví el componente a sx={sx} y caen los tres, incluido el del caso por defecto:

× centers the page and caps its width by default
× keeps the base styles when the caller overrides one of them
× accepts an array of styles like any other sx

Y me gustó la honestidad del comentario sobre qué no se afirma: el padding va en un media query con var(--mui-spacing) y jsdom no resuelve ninguno de los dos, así que el test verifica el centrado. Decirlo es mejor que escribir una aserción que pase por casualidad.

✅ El segundo problema, el de useFlexGap

Stack separando con margin-left pisa el ml: 'auto' del hijo: es de esas reglas de MUI que uno descubre a la mala. Busqué si quedaba algún caso afuera y no:

$ for f in $(grep -rl "ml: 'auto'" src --include=*.tsx); do
    grep -q "<Stack" $f && ! grep -q "useFlexGap" $f && echo "$f"
  done
(sin resultados)

El único otro marginLeft: 'auto' del repo está en WarehouseDistributionCard, dentro de un CardFooter con styled() y no de un Stack, así que no le aplica.

Y revisé la pantalla que todavía no entró —CarrierStepPage, de web#52—: usa PageWrapper sx={{ maxWidth: 1400 }}, con lo que se beneficia de este arreglo, y no depende de ningún margen automático, así que no va a necesitar useFlexGap cuando se mergee.

Veredicto

APPROVE.

Un arreglo de seis líneas que corrige cinco pantallas, con la causa bien identificada y ejemplos que fallan si vuelve. Las capturas de antes/después valen por sí solas.

🤖 Generated with Claude Code

https://claude.ai/code/session_012xAtddb53LRNVLuyTXyELp