Fix vendor item layout — checkbox left, distance right

- 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

@@ -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 {

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>
             )}