From 7ce8d02afe4bd585a031a031eec52b6dc6e00dc0 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 21:46:57 +0000
Subject: [PATCH] Cart summary trust badges: don't stretch to full card width
 at tablet

Was sm:flex-1, growing each badge to evenly fill the card's full
width. Now sm:w-auto with no flex-grow, so each badge only takes its
own content width; sm:flex-wrap added as a safety net in case all 3
don't fit on one line at exactly 640px.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/cart/components/CartContent.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/cart/components/CartContent.tsx b/app/cart/components/CartContent.tsx
index 7d57d52..83f1360 100644
--- a/app/cart/components/CartContent.tsx
+++ b/app/cart/components/CartContent.tsx
@@ -477,10 +477,13 @@ export function CartContent({
                 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">
+                once the sidebar narrows at lg:. sm:w-auto with no
+                flex-grow (was sm:flex-1) so each badge only takes its own
+                content width instead of stretching to fill the full card
+                width. */}
+            <div className="flex flex-col sm:flex-row sm:flex-wrap lg:flex-col gap-4 sm:gap-x-8 sm:gap-y-4 lg:gap-4 items-start w-full">
               {trustBadges.map((b) => (
-                <div key={b.id} className="flex gap-3 items-center w-full sm:w-auto sm:flex-1 lg:w-full lg:flex-none">
+                <div key={b.id} className="flex gap-3 items-center w-full sm:w-auto lg: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>
                 </div>