Revert TrustRow's breakpoint from sm: to lg:, center stacked badges

Same fixed-content-doesn't-fit bug as Footer's legal-links row,
confirmed via live-site horizontal-overflow measurement: ~100px
overflow at 666px viewport, ~54px at 768px. Multiple whitespace-nowrap
title+description badges don't fit in one row below ~1024px regardless
of fluid scaling. Also centers stacked badges (was items-start below
sm:, now items-center through the whole non-lg: range) per feedback.
This commit is contained in:
Marco
2026-07-29 12:09:44 +00:00
parent 61afa0dcae
commit 56fc8d970d
+11 -3
View File
@@ -11,10 +11,18 @@ export async function TrustRow() {
if (items.length === 0) return null;
return (
<div className="w-full bg-bg-base flex flex-col sm:flex-row gap-6 sm:gap-12 items-start sm:items-center justify-center py-8 px-[var(--layout-padding-x)]">
// 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.
<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)]">
{items.map((item, i) => (
<div key={item.id} className="flex items-center gap-6 sm:gap-12">
{i > 0 && <div className="hidden sm:block h-10 w-px bg-border" />}
<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" />