Correct README/skill: TrustRow's flex-wrap was reverted, not kept
Documents the third round: flex-wrap looked disorganized with exactly 3 badges (the lone wrapped item didn't align under either item above it), reverted back to strict single-column stacking the same day.
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user