Center cart's CartTrustBadges list below 640px
The previous TrustRow.tsx fix didn't touch this — the cart summary sidebar renders its own inline trust-badge list, not the shared TrustRow component. Each row was w-full unconditionally, so items-center on the container was a no-op (a full-width flex child centers to no visible effect). Now w-auto + justify-center below sm: (icon+title as a compact centered unit), w-full + justify-start (+ flex-1 on the title) from sm: up, matching the tiered-alignment pattern used elsewhere (Hero's social proof, TrustRow.tsx).
This commit is contained in:
@@ -457,12 +457,20 @@ export function CartContent({
|
||||
</div>
|
||||
|
||||
{/* Title only — /checkout renders the same CartTrustBadges
|
||||
docs with description too, see CheckoutContent.tsx. */}
|
||||
<div className="flex flex-col gap-4 items-start w-full">
|
||||
docs with description too, see CheckoutContent.tsx.
|
||||
Centered below sm: (640px), left-aligned from sm: up —
|
||||
each row is w-full sm:+ only, so the icon+title sits as a
|
||||
compact centered unit below sm: (a w-full row would make
|
||||
items-center on the container above a no-op) and expands
|
||||
to a left-aligned full-width row once there's more
|
||||
horizontal room. items-start on the container gives every
|
||||
row the same left edge once left-aligned, so nothing
|
||||
reads staggered/crooked between rows. */}
|
||||
<div className="flex flex-col gap-4 items-center sm:items-start w-full">
|
||||
{trustBadges.map((b) => (
|
||||
<div key={b.id} className="flex gap-3 items-center w-full">
|
||||
<div key={b.id} className="flex gap-3 items-center justify-center sm:justify-start w-auto sm:w-full">
|
||||
<Image alt="" src={b.icon} width={22} height={22} className="size-[1.375rem] shrink-0 object-contain" />
|
||||
<span className="flex-1 text-body-sm text-text-primary">{b.title}</span>
|
||||
<span className="sm:flex-1 text-body-sm text-text-primary">{b.title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user