Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix TrustRow badges misaligning with each other when centered

Browse Source 
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.
This commit is contained in:
Marco
2026-07-29 12:25:49 +00:00
parent 077986affb
commit 3aa8720daf
1 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/TrustRow.tsx
+31 -18
View File
@@ -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:.
<div className="w-full bg-bg-base flex flex-col lg:flex-row gap-6 lg:gap-12 items-center sm:items-start lg:items-center justify-center py-8 px-[var(--layout-padding-x)]">
{items.map((item, i) => (
<div key={item.id} className="flex items-center gap-6 lg:gap-12">
{i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
<div className="flex gap-4 items-center">
<div className="relative size-8 shrink-0">
<Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
</div>
<div className="flex flex-col gap-0.5 items-start">
<p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
<p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
// 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.
<div className="w-full bg-bg-base flex justify-center sm:justify-start lg:justify-center py-8 px-[var(--layout-padding-x)]">
{/* 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. */}
<div className="flex flex-col lg:flex-row gap-6 lg:gap-12 items-start lg:items-center">
{items.map((item, i) => (
<div key={item.id} className="flex items-center gap-6 lg:gap-12">
{i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
<div className="flex gap-4 items-center">
<div className="relative size-8 shrink-0">
<Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
</div>
<div className="flex flex-col gap-0.5 items-start">
<p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
<p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
</div>
</div>
</div>
</div>
))}
))}
</div>
</div>
);
}