From 766ad20774d091998a991296d46e57340db78be7 Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 17 Apr 2026 12:19:09 -0400
Subject: [PATCH] =?UTF-8?q?Fix=20vendor=20item=20layout=20=E2=80=94=20chec?=
 =?UTF-8?q?kbox=20left,=20distance=20right?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Switch from label to div to avoid global label CSS overriding flex layout
- Checkbox, vendor info, and distance badge now on the same row
---
 src/pages/workorders/view/WorkOrderViewPage.css | 2 ++
 src/pages/workorders/view/WorkOrderViewPage.js  | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/workorders/view/WorkOrderViewPage.css b/src/pages/workorders/view/WorkOrderViewPage.css
index d41161c5..848897c2 100644
--- a/src/pages/workorders/view/WorkOrderViewPage.css
+++ b/src/pages/workorders/view/WorkOrderViewPage.css
@@ -505,11 +505,13 @@
 
 .woDispatchVendorItem {
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   cursor: pointer;
   border-bottom: 1px solid #f0f0f0;
+  flex-wrap: nowrap;
 }
 
 .woDispatchVendorItem:last-child {
diff --git a/src/pages/workorders/view/WorkOrderViewPage.js b/src/pages/workorders/view/WorkOrderViewPage.js
index 6dddaceb..b6e7a73f 100644
--- a/src/pages/workorders/view/WorkOrderViewPage.js
+++ b/src/pages/workorders/view/WorkOrderViewPage.js
@@ -226,8 +226,8 @@ function DispatchModal({ wo, onClose, onDispatched }) {
             {!loaded ? <div className="woDispatchLoading">Loading vendors...</div> : filteredVendors.length === 0 ? <div className="woDispatchLoading">No vendors found</div> : (
               <div className="woDispatchVendorList">
                 {filteredVendors.map((v) => (
-                  <label key={v.id} className={`woDispatchVendorItem ${selectedIds.includes(v.id) ? "selected" : ""}`}>
-                    <input type="checkbox" checked={selectedIds.includes(v.id)} onChange={() => toggleVendor(v.id)} />
+                  <div key={v.id} className={`woDispatchVendorItem ${selectedIds.includes(v.id) ? "selected" : ""}`} onClick={() => toggleVendor(v.id)}>
+                    <input type="checkbox" checked={selectedIds.includes(v.id)} readOnly />
                     <div className="woDispatchVendorInfo">
                       <span className="woDispatchVendorName">{v.companyName}</span>
                       {v.tradeSpecialties && <span className="woDispatchVendorTrades">{v.tradeSpecialties}</span>}
@@ -239,7 +239,7 @@ function DispatchModal({ wo, onClose, onDispatched }) {
                         <span className="woDispatchDistLabel">miles</span>
                       </div>
                     )}
-                  </label>
+                  </div>
                 ))}
               </div>
             )}