TrustRow: side-by-side row below lg with icon above text, no wrap
Cart summary trust badges: side by side between sm and lg TrustRow.tsx: rebuilt as a single continuous below-lg tier instead of mobile-nebeneinander/tablet-stacked — icon above text (shrinking each badge to its text column's width) plus dropping whitespace-nowrap on title/description below lg (wrapping within their own narrow column instead of forcing overflow) means a full row of 3 badges now fits without needing to wrap or stack, avoiding the previously-reverted "odd item alone on its own line" issue a flex-wrap attempt hit. CartContent.tsx: the sidebar's trust-badge list (title only) now goes side by side between sm (640px) and lg (1024px) instead of always stacked — that sidebar is full page width through that whole range, plenty of room for 3 short titles in a row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
@@ -471,10 +471,16 @@ 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.
|
||||
Side by side between sm (640px) and lg (1024px) — this
|
||||
sidebar is full page width through that whole range (it
|
||||
only becomes a narrow fixed-width column at lg:, see this
|
||||
file's own lg:w-[20.625rem] above), plenty of room for 3
|
||||
short titles in a row; stacked at true mobile and again
|
||||
once the sidebar narrows at lg:. */}
|
||||
<div className="flex flex-col sm:flex-row lg:flex-col gap-4 sm:gap-6 lg:gap-4 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 w-full sm:w-auto sm:flex-1 lg:w-full lg:flex-none">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
+20
-32
@@ -11,43 +11,31 @@ export async function TrustRow() {
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
// 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.
|
||||
//
|
||||
// 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">
|
||||
// Below lg (1024px): badges sit side by side as one row (never wrap,
|
||||
// never stack to one-per-row) with icon ABOVE text, centered — icon
|
||||
// beside text (the lg: layout below) is what made a full row of 3
|
||||
// badges too wide below ~1024px in the first place (see git history:
|
||||
// originally lg:-gated for exactly this, then briefly tried flex-wrap,
|
||||
// which put an odd 3rd item alone on its own wrapped line and read as
|
||||
// disorganized). Putting the icon above the text instead shrinks each
|
||||
// badge down to just its text column's width, and — combined with
|
||||
// dropping whitespace-nowrap on the title/description below lg: so
|
||||
// long copy wraps within its own narrow column instead of forcing
|
||||
// overflow — a real row of 3 now fits without wrapping at all, so
|
||||
// there's no odd-item-out case to worry about. lg:+ reverts to the
|
||||
// original icon-beside-text row-with-dividers layout unchanged.
|
||||
<div className="w-full bg-bg-base flex justify-center py-8 px-[var(--layout-padding-x)]">
|
||||
<div className="flex flex-row justify-center gap-6 lg:gap-12 items-start lg:items-center w-full lg:w-auto">
|
||||
{items.map((item, i) => (
|
||||
<div key={item.id} className="flex items-center gap-6 lg:gap-12">
|
||||
<div key={item.id} className="flex flex-1 lg:flex-none items-center gap-6 lg:gap-12 min-w-0">
|
||||
{i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="flex flex-col items-center text-center gap-2 w-full min-w-0 lg:flex-row lg:items-center lg:text-left lg:gap-4 lg:w-auto">
|
||||
<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 className="flex flex-col gap-0.5 items-center min-w-0 lg:items-start">
|
||||
<p className="font-semibold text-body text-text-primary lg:whitespace-nowrap">{item.title}</p>
|
||||
<p className="text-body-sm text-text-muted lg:whitespace-nowrap">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user