From 7ba40163db17589da97926960795ac3c2303410d Mon Sep 17 00:00:00 2001
From: joshua <joshua@crosscode.co.za>
Date: Wed, 21 Oct 2026 16:03:21 +0200
Subject: [PATCH] Fix the bundle edit form's ticket rows

The quantity input had both w-full and w-16; w-full won, filling the row and pushing
the ticket picker off the side.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                                           |  6 ++++++
 frontend/src/app/dashboard/supervisor/bundles/page.tsx | 10 ++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31e2e36..6648130 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [1.28.3] - 2026-10-21
+
+### Fixed
+
+- Bundle deals edit form: each ticket row's quantity box filled the whole row, which pushed the ticket picker off the side and added a sideways scrollbar. The quantity box is narrow again, with the ticket picker beside it.
+
 ## [1.28.2] - 2026-10-21
 
 ### Changed
diff --git a/frontend/src/app/dashboard/supervisor/bundles/page.tsx b/frontend/src/app/dashboard/supervisor/bundles/page.tsx
index 1a0c63d..371e26a 100644
--- a/frontend/src/app/dashboard/supervisor/bundles/page.tsx
+++ b/frontend/src/app/dashboard/supervisor/bundles/page.tsx
@@ -46,7 +46,9 @@ const draftFromBundle = (b: EventBundle): Draft => ({
 
 const fmtDate = (iso: string | null | undefined) => (iso ? new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" }) : "");
 const fmtRand = (n: number) => `R ${(n || 0).toFixed(2)}`;
-const inputCls = "w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400";
+// fieldCls has no width, for fields sized by their row (inputCls is full width).
+const fieldCls = "border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400";
+const inputCls = `w-full ${fieldCls}`;
 const isPast = (ev: EventLite) => new Date(ev.endDate || ev.startDate).getTime() < Date.now();
 
 /** Standard price of one unit of an item (variant price, else the option's). */
@@ -355,7 +357,7 @@ function BundleModal({ token, event, bundleId, initial, onClose, onSaved }: {
           <button type="button" onClick={onClose} aria-label="Close" className="p-1 -m-1"><X className="w-5 h-5 text-gray-500" /></button>
         </div>
 
-        <div className="p-4 space-y-5 overflow-y-auto overscroll-contain">
+        <div className="p-4 space-y-5 overflow-y-auto overflow-x-hidden overscroll-contain">
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
@@ -377,9 +379,9 @@ function BundleModal({ token, event, bundleId, initial, onClose, onSaved }: {
                 return (
                   <div key={i} className="rounded-lg border bg-gray-50 p-2.5">
                     <div className="flex items-center gap-2">
-                      <input type="number" min="1" step="1" inputMode="numeric" className={`${inputCls} w-16 shrink-0 bg-white text-center`} value={it.quantity} onChange={e => setItem(i, { quantity: e.target.value })} aria-label="Quantity" required />
+                      <input type="number" min="1" step="1" inputMode="numeric" className={`${fieldCls} w-16 shrink-0 px-2 bg-white text-center`} value={it.quantity} onChange={e => setItem(i, { quantity: e.target.value })} aria-label="Quantity" required />
                       <span className="text-sm text-gray-500 shrink-0">×</span>
-                      <select className={`${inputCls} min-w-0 flex-1 bg-white`} value={it.eventOptionId} onChange={e => setItem(i, { eventOptionId: e.target.value, variantId: null })} aria-label="Ticket">
+                      <select className={`${fieldCls} min-w-0 flex-1 bg-white`} value={it.eventOptionId} onChange={e => setItem(i, { eventOptionId: e.target.value, variantId: null })} aria-label="Ticket">
                         {options.map(o => <option key={o.id} value={o.id}>{o.name} ({fmtRand(o.price)})</option>)}
                       </select>
                       <button type="button" onClick={() => set("items", d.items.filter((_, j) => j !== i))} disabled={d.items.length <= 1}