Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cart summary trust badges: don't stretch to full card width at tablet

Browse Source 
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>
This commit is contained in:
Marco
2026-07-30 21:46:57 +00:00
parent 11c8d0b7b6
commit 7ce8d02afe
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/cart/components/CartContent.tsx
+6 -3
View File
@@ -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>