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

Only center TrustRow badges below 640px, left-align through Tablet

Browse Source 
Centering the whole non-lg: range (previous fix) overcorrected — only
true Mobile should center (matches other centered content there); the
640-1023px Tablet band left-aligns instead, each badge's left edge
lining up via items-start (no per-badge centering, so nothing reads
crooked). Same tiered-alignment pattern as Hero's social-proof row.
This commit is contained in:
Marco
2026-07-29 12:13:20 +00:00
parent 19440b9bcf
commit 17679cc81e
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/TrustRow.tsx
+7 -1
View File
@@ -19,7 +19,13 @@ export async function TrustRow() {
// 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.
<div className="w-full bg-bg-base flex flex-col lg:flex-row gap-6 lg:gap-12 items-center justify-center py-8 px-[var(--layout-padding-x)]">
//
// 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" />}