Marco
c8cf6ae10d
TrustRow.tsx: reserve 2 lines of height for the title below lg: so the description starts at the same y-position regardless of whether that badge's own title happened to wrap to 1 or 2 lines in its narrow stacked column. BestellbestaetigungContent.tsx: same fix category as NewsletterModal's dialog width cap — max-w-[56rem] doesn't constrain anything below 896px, so the order-details card stretched full width through the 640-1023px tablet range. Added max-w-[36rem] there, widening to the real cap only once lg:'s sidebar split needs the room. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
57 lines
3.3 KiB
TypeScript
57 lines
3.3 KiB
TypeScript
import Image from "next/image";
|
|
import { getTrustBadges } from "../lib/payload";
|
|
|
|
// Content now lives in Payload (TrustBadges collection) instead of being
|
|
// hardcoded here, so copy (e.g. the shipping timeframe/threshold numbers)
|
|
// can be updated without a code deploy. If the fetch fails or nothing is
|
|
// seeded yet, the row just doesn't render rather than showing stale
|
|
// hardcoded fallback text that could drift from the real numbers.
|
|
export async function TrustRow() {
|
|
const items = await getTrustBadges();
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
// 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 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 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-center min-w-0 lg:items-start">
|
|
{/* min-h reserves 2 lines worth of height (text-body's
|
|
line-height is 1.6rem) below lg: — titles are short
|
|
enough that some wrap to 2 lines in their narrow
|
|
stacked column and some don't, and without a reserved
|
|
height the description below started at a different
|
|
y-position from one badge to the next depending on
|
|
whether its own title happened to wrap. Reset to
|
|
min-h-0 at lg: (whitespace-nowrap there forces a
|
|
single line anyway, so the reservation would just add
|
|
unwanted empty space). */}
|
|
<p className="font-semibold text-body text-text-primary min-h-[3.2rem] lg:min-h-0 lg:whitespace-nowrap">{item.title}</p>
|
|
<p className="text-body-sm text-text-muted lg:whitespace-nowrap">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|