From 64f562c45c0f9be5deb40d2cb26f4617197c7716 Mon Sep 17 00:00:00 2001 From: LauAubert Date: Fri, 25 Sep 2026 21:26:18 -0300 Subject: [PATCH 1/2] fix: [TESIS-132] keep the page wrapper padding when a screen passes sx `PageWrapper` spread its props after its own `sx`, so a screen passing `sx={{ maxWidth: 1400 }}` replaced the base styles instead of adding to them. Inventory, orders, new order (both steps) and order edit lost their padding and centering: the content sat against the sidebar and the top bar, and the search field label on inventory was cut off. The caller's `sx` is now appended to the base one, which is how MUI composes an `sx` that may also be an array. Co-Authored-By: Claude Opus 5.5 --- src/shared/components/PageWrapper.test.tsx | 46 ++++++++++++++++++++++ src/shared/components/PageWrapper.tsx | 20 ++++++---- 2 files changed, 59 insertions(+), 7 deletions(-) create mode 100644 src/shared/components/PageWrapper.test.tsx diff --git a/src/shared/components/PageWrapper.test.tsx b/src/shared/components/PageWrapper.test.tsx new file mode 100644 index 0000000..8097344 --- /dev/null +++ b/src/shared/components/PageWrapper.test.tsx @@ -0,0 +1,46 @@ +import { screen } from '@testing-library/react' +import { describe, expect, it } from 'vitest' + +import { renderWithTheme } from '../../test/renderWithTheme' + +import { PageWrapper } from './PageWrapper' + +describe('PageWrapper', () => { + it('centers the page and caps its width by default', () => { + renderWithTheme(Contenido) + + expect(screen.getByRole('main')).toHaveStyle({ + maxWidth: '1200px', + marginLeft: 'auto', + marginRight: 'auto', + width: '100%', + }) + }) + + // Las pantallas anchas le pasan `sx={{ maxWidth: 1400 }}`. Antes ese `sx` + // reemplazaba al base entero y la página quedaba sin padding ni centrado. + // Se afirma el centrado y no el padding: el padding va en un media query con + // `var(--mui-spacing)`, y jsdom no resuelve ninguno de los dos. + it('keeps the base styles when the caller overrides one of them', () => { + renderWithTheme(Contenido) + + expect(screen.getByRole('main')).toHaveStyle({ + maxWidth: '1400px', + marginLeft: 'auto', + marginRight: 'auto', + width: '100%', + }) + }) + + it('accepts an array of styles like any other sx', () => { + renderWithTheme( + Contenido, + ) + + expect(screen.getByRole('main')).toHaveStyle({ + maxWidth: '1400px', + marginLeft: 'auto', + minHeight: '100%', + }) + }) +}) diff --git a/src/shared/components/PageWrapper.tsx b/src/shared/components/PageWrapper.tsx index 39b0324..48bdb31 100644 --- a/src/shared/components/PageWrapper.tsx +++ b/src/shared/components/PageWrapper.tsx @@ -5,17 +5,23 @@ interface PageWrapperProps extends BoxProps { children: ReactNode } -export function PageWrapper({ children, ...props }: PageWrapperProps) { +export function PageWrapper({ children, sx, ...props }: PageWrapperProps) { return ( {children} From f822f4535978b165d7dcecf076840f5c5ce23f40 Mon Sep 17 00:00:00 2001 From: LauAubert Date: Fri, 25 Sep 2026 21:32:21 -0300 Subject: [PATCH 2/2] fix: [TESIS-132] push the header actions and the wizard next button to the right `Stack` spaces its children with `margin-left` unless `useFlexGap` is set, and that rule is more specific than a child's own `ml: 'auto'`. The search field and the create button on inventory and orders, and the next button on both steps of the new order wizard, ended up next to the content before them instead of against the right edge. With `useFlexGap` the spacing becomes `gap` and `ml: 'auto'` works again. Co-Authored-By: Claude Opus 5.5 --- src/features/inventory/pages/InventoryPage.tsx | 3 +++ src/features/orders/pages/NewOrderPage.tsx | 4 +++- src/features/orders/pages/OrdersPage.tsx | 3 +++ src/features/orders/pages/ShippingStepPage.tsx | 4 +++- 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/features/inventory/pages/InventoryPage.tsx b/src/features/inventory/pages/InventoryPage.tsx index 786d7e9..fc0ac6b 100644 --- a/src/features/inventory/pages/InventoryPage.tsx +++ b/src/features/inventory/pages/InventoryPage.tsx @@ -166,9 +166,12 @@ export function InventoryPage() { return ( + {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el + `ml: 'auto'` que manda las acciones a la derecha (TESIS-132). */} diff --git a/src/features/orders/pages/NewOrderPage.tsx b/src/features/orders/pages/NewOrderPage.tsx index 94e104a..799cfb3 100644 --- a/src/features/orders/pages/NewOrderPage.tsx +++ b/src/features/orders/pages/NewOrderPage.tsx @@ -121,7 +121,9 @@ export function NewOrderPage() { weight={formatWeight(draftWeight(items))} /> - + {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el + `ml: 'auto'` que manda el botón de avanzar a la derecha (TESIS-132). */} + diff --git a/src/features/orders/pages/OrdersPage.tsx b/src/features/orders/pages/OrdersPage.tsx index a23f2c2..750f72e 100644 --- a/src/features/orders/pages/OrdersPage.tsx +++ b/src/features/orders/pages/OrdersPage.tsx @@ -92,9 +92,12 @@ export function OrdersPage() { return ( + {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el + `ml: 'auto'` que manda las acciones a la derecha (TESIS-132). */} diff --git a/src/features/orders/pages/ShippingStepPage.tsx b/src/features/orders/pages/ShippingStepPage.tsx index 1c3a5e5..261bd6d 100644 --- a/src/features/orders/pages/ShippingStepPage.tsx +++ b/src/features/orders/pages/ShippingStepPage.tsx @@ -151,7 +151,9 @@ export function ShippingStepPage() { provincesError={provinces.isError} /> - + {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el + `ml: 'auto'` que manda el botón de avanzar a la derecha (TESIS-132). */} +