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

fix(checkout): match E-Mail/Straße field width to Vorname's half-row width

Browse Source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-19 22:00:37 +00:00
parent b6b81be901
commit 754966c8ba
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/checkout/components/CheckoutContent.tsx
+20 -4
View File
@@ -45,10 +45,11 @@ function StepCircle({ state, number }: { state: "done" | "active" | "upcoming";
function FormField({
label,
wrapperClassName = "flex-1 min-w-0",
...props
}: { label: string } & React.InputHTMLAttributes<HTMLInputElement>) {
}: { label: string; wrapperClassName?: string } & React.InputHTMLAttributes<HTMLInputElement>) {
return (
<label className="flex flex-col gap-2 items-start flex-1 min-w-0">
<label className={`flex flex-col gap-2 items-start ${wrapperClassName}`}>
<span className="text-label text-text-muted">{label}</span>
<input
{...props}
@@ -159,8 +160,23 @@ export function CheckoutContent() {
<FormField label="Vorname" type="text" placeholder="Max" autoComplete="given-name" />
<FormField label="Nachname" type="text" placeholder="Mustermann" autoComplete="family-name" />
</div>
<FormField label="E-Mail-Adresse" type="email" placeholder="max@beispiel.de" autoComplete="email" />
<FormField label="Straße und Hausnummer" type="text" placeholder="Musterstraße 1" autoComplete="street-address" />
{/* w-[calc(50%-0.5rem)] at sm: — exactly matches Vorname's
actual rendered width in the 2-col row above (each half of
a gap-4 flex row), instead of stretching full-width. */}
<FormField
label="E-Mail-Adresse"
type="email"
placeholder="max@beispiel.de"
autoComplete="email"
wrapperClassName="w-full sm:w-[calc(50%-0.5rem)] sm:flex-none min-w-0"
/>
<FormField
label="Straße und Hausnummer"
type="text"
placeholder="Musterstraße 1"
autoComplete="street-address"
wrapperClassName="w-full sm:w-[calc(50%-0.5rem)] sm:flex-none min-w-0"
/>
<div className="flex flex-col sm:flex-row gap-4 w-full">
<FormField label="PLZ" type="text" placeholder="10115" autoComplete="postal-code" />
<FormField label="Ort" type="text" placeholder="Berlin" autoComplete="address-level2" />