diff --git a/README.md b/README.md index e32ccc8..51a3dc0 100644 --- a/README.md +++ b/README.md @@ -1895,6 +1895,15 @@ moving both the fluid floor and the structural switch down together, from No browser/screenshot tool is available in this environment, so this migration is verified by typecheck/build/lint/`test:unit` only — actual visual confirmation at 640/768/1024/1440px is still owed by the user. +**Update, same day:** a real headless-browser check turned out to be +possible after all — `npx playwright install chromium` in a scratch +directory, then a plain Node script driving `playwright`'s `chromium.launch()` +against the *live* site at a specific viewport, reading +`document.documentElement.scrollWidth` vs. `window.innerWidth` (a real +horizontal overflow, not just "looks cramped") and `getBoundingClientRect()` +on specific elements. This is a real, repeatable verification tool for +future Tablet-layout work in this environment — see the two regressions +below, both caught this way, not by guessing from a screenshot. Same session: **`Hero.tsx`'s heading** shortened from two sentences ("Verliere dich nicht im Mehr. Finde heraus, was wichtig ist.") to one @@ -1905,6 +1914,28 @@ lengthened to match the other two cards' length (see the Payload repo's own README for the `fix-3x3-copy-length.ts` one-off that changed the live content). +**Correction, 2026-07-29 (later the same day): `Footer.tsx`'s legal-links +row and `TrustRow.tsx` were wrongly reclassified as plain `sm:` renames +above.** Both had originally used `lg:flex-row` for a genuine +fixed-content-width reason (logo + handle + 5 `whitespace-nowrap` legal +links; multiple `whitespace-nowrap` title+description trust badges) — not +the "grid arrives before the fluid floor" bug the `sm:` migration +targets. Renaming them to `sm:` during the mechanical mass-rename pass +caused a **real horizontal page overflow** in the 640-1023px band on +every page that renders them (Footer: every page; TrustRow: shop, cart, +checkout, order-confirmation, `/agb`, `/widerruf`, `/not-found`) — +confirmed via the Playwright method above: `scrollWidth` exceeded the +viewport by ~80-100px at 666-768px viewports. Both reverted to `lg:`, +matching their original (correct) behavior; `TrustRow.tsx` also now +centers its badges when stacked (`items-center` throughout, was +`items-start` below `sm:`) per follow-up feedback. **Lesson: "this looks +like the same md:→sm: pattern as everything else" isn't sufficient +justification on its own — check whether a component was *already* on +`lg:` for a real fixed-width-content reason (not just inherited from an +earlier, unrelated Tablet fix) before reclassifying it as a mechanical +rename.** See the `figma-to-nextjs` skill's Gotcha 21 for the fuller +writeup. + ## Tests `npm run test:unit` (Vitest, `node` environment, no jsdom/Next.js runtime