diff --git a/README.md b/README.md index 983f81b..4866a13 100644 --- a/README.md +++ b/README.md @@ -1934,8 +1934,8 @@ 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 +**Follow-up, same day: `TrustRow.tsx`'s alignment went through three more +rounds after the `lg:` revert above, all 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 @@ -1945,20 +1945,25 @@ 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. +group as a unit. **Then tried replacing that whole approach** with `flex +flex-wrap justify-center` directly on the badges (no inner wrapper, no +breakpoint at all): flexbox does correctly center each *wrapped line* as +a group (no misalignment bug), and it removes the overflow risk without +a `lg:`-only breakpoint, so badges flowed as many-per-row as fit (1 per +row on a narrow phone, 2-with-the-3rd-below once there's room, all 3 in +a row at Desktop). **Reverted the same day** once actually screenshotted: +with exactly 3 badges, the 2-per-row-plus-1-wrapped layout put the lone +third badge off to one side, aligned under neither badge above it — +read as "durcheinander"/disorganized rather than clean. Back to the +inner-shrink-wrap single-column approach (strict 1-per-row below `lg:`, +which stays visually tidy regardless of badge count). **Lesson:** +`flex-wrap` is a real, correct fix for the alignment/overflow problem, +but an odd item count wrapping into a partial last row is its own +separate aesthetic risk, worth a real screenshot at the exact width +where the wrap count changes before trusting it as final. `Footer.tsx`'s +legal-links row was left on its plain `lg:` fix throughout — never +asked to change, and its content (nowrap links, not title/description +pairs) doesn't have the same "which items share a line" concern. **Also same day: `NewsletterModal.tsx`'s close button** was `position: absolute` inside the dialog's own `overflow-y-auto` scroll container, so