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

Fix trust-badge title/description misalignment, cap order-confirmation card width at tablet

Browse Source 
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>
This commit is contained in:
Marco
2026-07-30 22:05:40 +00:00
parent 2f8c184dc6
commit c8cf6ae10d
2 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/TrustRow.tsx
+11 -1
View File
@@ -34,7 +34,17 @@ export async function TrustRow() {
<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">
<p className="font-semibold text-body text-text-primary lg:whitespace-nowrap">{item.title}</p>
{/* 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>