From 754966c8ba48d54e156667553ac96d40e41be224 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 19 Jul 2026 22:00:37 +0000
Subject: [PATCH] =?UTF-8?q?fix(checkout):=20match=20E-Mail/Stra=C3=9Fe=20f?=
 =?UTF-8?q?ield=20width=20to=20Vorname's=20half-row=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/checkout/components/CheckoutContent.tsx | 24 +++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/checkout/components/CheckoutContent.tsx b/app/checkout/components/CheckoutContent.tsx
index c776f06..38e80b6 100644
--- a/app/checkout/components/CheckoutContent.tsx
+++ b/app/checkout/components/CheckoutContent.tsx
@@ -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" />