From 11c8d0b7b63ac2a565095e775a866ecd08eac3d9 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 30 Jul 2026 21:44:30 +0000 Subject: [PATCH] TrustRow: side-by-side row below lg with icon above text, no wrap Cart summary trust badges: side by side between sm and lg MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/cart/components/CartContent.tsx | 12 +++++-- app/components/TrustRow.tsx | 52 +++++++++++------------------ 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/app/cart/components/CartContent.tsx b/app/cart/components/CartContent.tsx index 5ba1c85..7d57d52 100644 --- a/app/cart/components/CartContent.tsx +++ b/app/cart/components/CartContent.tsx @@ -471,10 +471,16 @@ export function CartContent({ {/* Title only — /checkout renders the same CartTrustBadges - docs with description too, see CheckoutContent.tsx. */} -
+ 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:. */} +
{trustBadges.map((b) => ( -
+
{b.title}
diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx index a654a2a..dfe58ff 100644 --- a/app/components/TrustRow.tsx +++ b/app/components/TrustRow.tsx @@ -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. -
- {/* 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. */} -
+ // 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. +
+
{items.map((item, i) => ( -
+
{i > 0 &&
} -
+
-
-

{item.title}

-

{item.description}

+
+

{item.title}

+

{item.description}