Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

@@ -0,0 +89,4 @@
+                onChange={e => setValue(e.target.value)}
+                placeholder={placeholder}
+                autoFocus
+                className="w-full px-3 py-2 text-base sm:text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-accent transition-colors"

@@ -2,3 +2,3 @@
 
 /** Returns the two-character initials for a user, used as the avatar fallback. */
-function getInitials(user?: UserModel): string {
+function getInitials(user?: DisplayableUser): string {

@@ -0,0 +179,4 @@
+                    autoFocusName
+                    layout={ShoppingListItemFieldsLayout.INLINE}
+                />
+                {formError && <FieldError message={formError}/>}

@@ -0,0 +5,4 @@
+};
+
+/** Small pill marking the user's default list, in the overview rows and the list header. */
+export default function ShoppingListBadge({text}: ShoppingListBadgeProps) {

@@ -0,0 +185,4 @@
+                        onClick={() => { clearForm(); setIsExpanded(false); }}
+                        text="Schließen"
+                        buttonType={ButtonType.DefaultButton}
+                        className="min-h-11"

@@ -0,0 +61,4 @@
+                />
+            )}
+            <div className="flex items-center justify-between gap-2 border-t border-neutral-300 pt-3">
+                <button

@@ -0,0 +47,4 @@
+                every size, primary on top — three long labels never fit side by side in the card. */}
+            <div className="flex flex-col-reverse gap-2 mt-4">
+                <Button onClick={onDontAdd} text="Nicht hinzufügen" buttonType={ButtonType.DefaultButton} disabled={isBusy} className="min-h-11"/>
+                <Button onClick={onEditExisting} text="Bestehenden bearbeiten" buttonType={ButtonType.DefaultButton} disabled={isBusy} className="min-h-11"/>

@@ -0,0 +7,4 @@
+ * Extra classes for every item input. Everything else (padding, border, focus ring) comes from
+ * the global `input` style in index.css; this only guarantees the 44 px tap target.
+ */
+const INPUT_CLASS = "min-h-11";

@@ -0,0 +94,4 @@
+        >
+            <div className="flex items-stretch">
+                {/* Checkbox — its own button so a tap on the row body never ticks */}
+                <button

@@ -0,0 +156,4 @@
+            await loadOverview();
+        } catch (error) {
+            const kind = classifyShoppingListError(error);
+            if (kind === ShoppingListErrorKind.CONFLICT) {

@@ -0,0 +292,4 @@
+                        {notice && (
+                            <div role="status" className="flex items-start gap-3 rounded-lg bg-amber-50 border border-amber-200 text-amber-900 px-4 py-3">
+                                <Info size={18} className="flex-shrink-0 mt-0.5"/>
+                                <p className="flex-1 text-sm">{NOTICE_MESSAGES[notice]}</p>

@@ -0,0 +141,4 @@
+                {error && <FieldError message={error}/>}
+
+                {/* Who has access: the owner first, then every share */}
+                <ul className="divide-y divide-neutral-100">

@@ -0,0 +15,4 @@
+ * Formats amount and unit for an item line: "1,5 l", "500 g", "2", "Packung" (unit only),
+ * or "" when both are absent.
+ */
+export function formatItemQuantity(amount?: number, unit?: string): string {