From 3aa8720daf7b16a0099916ec0884688198f1785e Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 29 Jul 2026 12:25:49 +0000 Subject: [PATCH] Fix TrustRow badges misaligning with each other when centered MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit items-center directly on the badge container centered each badge independently within the container's width — badges with different title/description lengths ended up with different left edges instead of lining up (confirmed via our own screenshot: icons at different x positions below 640px). Wraps all badges in one inner shrink-to-fit group (always items-start internally, so every badge shares the same left edge) and centers/left-aligns that single group as a unit from the outer wrapper instead. --- app/components/TrustRow.tsx | 49 +++++++++++++++++++++++-------------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx index 156e6ff..a654a2a 100644 --- a/app/components/TrustRow.tsx +++ b/app/components/TrustRow.tsx @@ -20,26 +20,39 @@ export async function TrustRow() { // live site (2026-07-29): scrollWidth exceeded the viewport by // ~100px at 666px and ~54px at 768px before this fix. // - // Alignment is tiered, same pattern as Hero's social-proof row: - // centered below sm: (true Mobile), left-aligned from sm: to lg: - // (each stacked badge's left edge lines up via items-start — no risk - // of a "crooked" look since it's a shared start edge, not per-badge - // centering), centered again once it's a single row at lg:. -
- {items.map((item, i) => ( -
- {i > 0 &&
} -
-
- -
-
-

{item.title}

-

{item.description}

+ // 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}

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