From 7b7e87182716064972481c4191efb9b75b7db283 Mon Sep 17 00:00:00 2001
From: Josh Rogers <joslrogers@outlook.com>
Date: Thu, 14 May 2026 19:56:19 -0500
Subject: [PATCH] Give shopping list item name field full-width row

The name field was crammed into a single flex row with qty/unit inputs,
section dropdown, and Add button, leaving it too narrow to use. Moved
it above the controls row so it spans full width.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/routes/lists/[id]/+page.svelte        | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/routes/lists/[id]/+page.svelte b/src/frontend/src/routes/lists/[id]/+page.svelte
index c4cd522..b6567f4 100644
--- a/src/frontend/src/routes/lists/[id]/+page.svelte
+++ b/src/frontend/src/routes/lists/[id]/+page.svelte
@@ -273,7 +273,15 @@
 			</button>
 		</div>
 
-		<form onsubmit={e => { e.preventDefault(); addItem(); }} class="mb-4 space-y-1">
+		<form onsubmit={e => { e.preventDefault(); addItem(); }} class="mb-4 space-y-2">
+			<ProductTypeahead
+				bind:value={newItemName}
+				placeholder="Add an item..."
+				ariaLabel="Item name"
+				inputClass="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-base focus:border-primary focus:outline-none"
+				onsubmit={addItem}
+				onProductChange={onItemProductChange}
+			/>
 			<div class="flex flex-wrap gap-2">
 				{#if newItemIsApproximate}
 					<input
@@ -288,16 +296,6 @@
 						allowedUnitCategories={newItemAllowedUnitCategories}
 					/>
 				{/if}
-				<div class="min-w-0 flex-1">
-					<ProductTypeahead
-						bind:value={newItemName}
-						placeholder="Add an item..."
-						ariaLabel="Item name"
-						inputClass="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-base focus:border-primary focus:outline-none"
-						onsubmit={addItem}
-						onProductChange={onItemProductChange}
-					/>
-				</div>
 				{#if sections.length > 0}
 					<select
 						bind:value={newItemSectionId}