Skip to content

Redesign layout review — 2026-09-26

These refinements later shipped in the September 27 redesign. The verification results below are the original local review, not new production checks. Start with the redesign story; use the generalized tooling below to repeat a local layout check.

Follow-up to the Steps 5–6 handoff, before the Step 7 production cutover. These changes do not deploy the VPS.

Landing viewport contract

  • Above the existing 680px phone breakpoint, size the landing within the viewport while reserving the actual header, introduction, labels and footer.
  • Keep the tiles' original 1.38 aspect ratio when they fit. Only reduce image height when the available vertical space requires it; both images stay equal.
  • Image panels have a 160px minimum. Below the content minimum, allow normal document scrolling, not hidden text, a footer overlay, or arbitrarily tiny tiles. Larger text and zoom can therefore legitimately require scrolling.
  • At 680px and below, keep the existing stacked phone tiles and scrolling.
  • The footer remains in document flow, including its email and server-side WhatsApp contact. This does not change the full-height Guanza carousel.

Repeatable browser check

The product detail's related pieces no longer inherit the catalog's staggered middle-column transform. On desktop, all three cards start at the same height; the introductory heading is centered over the row and spans two card columns plus their gap. Smaller screens retain the existing responsive product grid, with the heading using the available width. Product selection, prices, cart behavior and the collection catalog's own layout are unchanged.

Start the local application preview and install Playwright with its Chromium browser in a separate tooling directory if it is not already available. No new application dependency is required. Expose that directory's node_modules through NODE_PATH, then run from the repository root:

NODE_PATH=/path/to/browser-tools/node_modules node scripts/check-app-layout.mjs

PLAYWRIGHT_CHROMIUM_EXECUTABLE can optionally select an existing Chromium executable. The script checks the live preview at localhost:8080, not the VPS or customer data. It exercises Spanish and English, constant-width height reductions at 1640px, 1146px and 932px, a very short window, and the 680px/390px phone layouts. It does not click contact buttons or send messages.

The check also opens the existing local portavelas-estrato fixture in both languages, with three related pieces, and checks alignment/heading placement at 1640px, 1146px, 932px and 390px. A missing/deleted fixture will require an intentional update to that test route, not a production catalog mutation.

Validation: both browser checks passed against the rebuilt local Docker preview. The portfolio build and its 22 tests, all 37 storefront tests, and root lint passed (portfolio lint retains its existing image-optimization warnings). The storefront production build also succeeded in the local container. Short laptop screenshots were reviewed; neither change is a production deployment.