From 908f46c962f1364ba57e01727b5e391d972c98b2 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 29 Jul 2026 12:36:22 +0000 Subject: [PATCH] Document TrustRow's flex-wrap rewrite and the modal sticky-button fix Covers the two follow-up rounds after the Footer/TrustRow lg: revert: the items-center misalignment bug and its flex-wrap resolution, plus NewsletterModal's absolute-to-sticky close button fix. Cross-references the figma-to-nextjs skill's new Gotchas 22-23. --- README.md | 37 ++++++++++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 51a3dc0..983f81b 100644 --- a/README.md +++ b/README.md @@ -1926,9 +1926,7 @@ 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 +matching their original (correct) behavior. **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 @@ -1936,6 +1934,39 @@ earlier, unrelated Tablet fix) before reclassifying it as a mechanical rename.** See the `figma-to-nextjs` skill's Gotcha 21 for the fuller writeup. +**Follow-up, same day: `TrustRow.tsx`'s alignment went through two more +rounds after the `lg:` revert above, both centered on the same +underlying flexbox lesson (skill Gotcha 22).** First, centering its +badges when stacked (per feedback) was implemented as plain `items-center` +directly on the flex-col container — but `align-items:center` centers +*each item independently* within the container's own width, so the 3 +badges (different title/description lengths) ended up with 3 different +left edges instead of lining up with each other (confirmed via a real +screenshot: icons at different x-positions). Fixed by wrapping all +badges in one inner shrink-to-fit group with `items-start` internally +(so they share one left edge), then centering/left-aligning that single +group as a unit — but this still needed a 3-tier `justify-center`/ +`sm:justify-start`/`lg:justify-center` breakpoint dance on the outer +wrapper. **Replaced entirely** with `flex flex-wrap justify-center` on +the badges directly (no inner wrapper, no breakpoint at all): flexbox +centers each *wrapped line* as a group, so badges now flow as many-per- +row as actually fit at the current width (1 per row on a narrow phone, +2-with-the-3rd-centered-below once there's room, all 3 in one row at +Desktop) — this also means the row can never overflow (an item that +doesn't fit just wraps), so the `lg:`-only structural exception from the +correction above isn't needed anymore either. `Footer.tsx`'s legal-links +row was deliberately left on its `lg:` fix, not converted to `flex-wrap` +too — not asked for, and its content (nowrap links, no title/description +pairs) doesn't have the same "which items share a line" ambiguity that +made wrap worth it for TrustRow. + +**Also same day: `NewsletterModal.tsx`'s close button** was `position: +absolute` inside the dialog's own `overflow-y-auto` scroll container, so +scrolling the modal's content scrolled the close button away with it. +Switched to `position: sticky` (`sticky top-6 ml-auto mr-6 -mb-6`) so it +stays pinned to the top-right corner of the visible (scrolled) area — +see the skill's Gotcha 23. + ## Tests `npm run test:unit` (Vitest, `node` environment, no jsdom/Next.js runtime