From 5f219c23f9ef9720f6a3c015cdceb91575b52eab Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 29 Jul 2026 12:38:44 +0000 Subject: [PATCH] Revert TrustRow from flex-wrap back to single-column stacking MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The flex-wrap experiment (2 badges per row + 1 wrapped centered below) looked disorganized with exactly 3 badges — the wrapped single item doesn't align under either item in the row above it, reported as "durcheinander". Reverts to strict single-column stacking below lg: (the inner-shrink-to-fit-group + outer center/left-align pattern), which stays visually clean regardless of how many badges exist. --- app/components/TrustRow.tsx | 64 +++++++++++++++++++++++-------------- 1 file changed, 40 insertions(+), 24 deletions(-) diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx index 03f968a..a654a2a 100644 --- a/app/components/TrustRow.tsx +++ b/app/components/TrustRow.tsx @@ -11,32 +11,48 @@ export async function TrustRow() { if (items.length === 0) return null; return ( - // flex-wrap + justify-center instead of a hard sm:/lg: structural - // breakpoint — CSS flexbox centers each *wrapped line* independently, - // so badges naturally 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 it once there's room, all 3 in one row at Desktop - // widths) with no breakpoint math and no overflow risk, since an - // item that doesn't fit just wraps instead of forcing a scrollbar - // (this used to be a hard lg: exception for exactly that overflow - // reason — see git history — no longer needed with wrap). Divider - // bars between badges stay lg:-only for simplicity, since which - // badges share a line isn't fixed/known ahead of time below lg:. -
- {items.map((item, i) => ( -
- {i > 0 &&
} -
-
- -
-
-

{item.title}

-

{item.description}

+ // Structural breakpoint is lg:, not sm: — a deliberate exception to + // the site's sm: (640px) structural consolidation, same category as + // Footer's legal-links row (see that component's own comment): + // multiple whitespace-nowrap title+description badges side by side + // don't fit in one row below ~1024px regardless of fluid scaling. + // Confirmed via a real horizontal-overflow measurement against the + // live site (2026-07-29): scrollWidth exceeded the viewport by + // ~100px at 666px and ~54px at 768px before this fix. + // + // Outer wrapper only positions the *whole badge group* (center below + // sm:, left-aligned sm:-lg:, centered row again at lg:) — it does NOT + // align each badge individually. A first attempt put items-center + // directly on this container with each badge as a sibling; since + // flex's align-items centers each item within the container's own + // width independently, badges with different title/description + // lengths ended up with different left edges (not lining up with + // each other — reported 2026-07-29, exactly the "sonst sieht es + // schief aus" risk). Fixed by wrapping all badges in one inner + // group (below) that's always internally left-aligned to itself, + // then centering/left-aligning that single group as a unit here. +
+ {/* Inner group — shrink-to-fit width (not w-full), so it's exactly + as wide as its widest badge; items-start keeps every badge's + left edge flush with every other badge's, regardless of each + one's own content width. This single group is what the outer + wrapper above centers/left-aligns as one block. */} +
+ {items.map((item, i) => ( +
+ {i > 0 &&
} +
+
+ +
+
+

{item.title}

+

{item.description}

+
-
- ))} + ))} +
); }