feature/IO-3499-React-19: Email breaking bounds in job info / responsive..

client/src/components/data-label/data-label.component.jsx

@@ -13,31 +13,32 @@ export default function DataLabel({
   if (!open || (hideIfNull && !children)) return null;
 
   return (
-    <div {...props} style={{ display: "flex" }}>
+    <div {...props} style={{ display: "flex", alignItems: "flex-start" }}>
       <div
         style={{
-          // flex: 2,
-          marginRight: ".2rem"
+          marginRight: ".2rem",
+          flexShrink: 0, // <-- key: don't let the label collapse
+          whiteSpace: "nowrap" // <-- key: keep "Email:" on one line
         }}
       >
         <Typography.Text type="secondary">{`${label}:`}</Typography.Text>
       </div>
+
       <div
         style={{
-          flex: 4,
+          flex: 1, // <-- key: take remaining space
+          minWidth: 0, // <-- key: allow this flex item to shrink
           marginLeft: ".3rem",
           fontWeight: "bolder",
-          wordWrap: "break-word",
-          cursor: onValueClick !== undefined ? "pointer" : ""
+          overflowWrap: "anywhere", // <-- key: break long tokens (email/vin)
+          wordBreak: "break-word", // (backup behavior across browsers)
+          cursor: onValueClick !== undefined ? "pointer" : "",
+          ...(styles?.value ?? {}) // apply your per-field overrides to ALL children types
         }}
         className={valueClassName}
         onClick={onValueClick}
       >
-        {typeof children === "string" ? (
-          <Typography.Text style={styles?.value}>{children}</Typography.Text>
-        ) : (
-          children
-        )}
+        {typeof children === "string" ? <Typography.Text>{children}</Typography.Text> : children}
       </div>
     </div>
   );

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -86,10 +86,10 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail, isPar
 
   const statusMenu = {
     items: [
-      ...availableStatuses.map((item) => ({
+      ...(availableStatuses?.map((item) => ({
         key: item,
         label: item
-      }))
+      })) ?? [])
     ],
     onClick: (e) => updateJobStatus(e.key)
   };

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -65,8 +65,8 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
   const colSpan = {
     xs: { span: 24 },
     sm: { span: 24 },
-    md: { span: isPartsEntry ? 8 : 12 },
-    lg: { span: isPartsEntry ? 8 : 6 },
+    md: { span: 12 },
+    lg: { span: 12 },
     xl: { span: isPartsEntry ? 8 : 6 }
   };
 
@@ -260,19 +260,19 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                   <ChatOpenButton type={job.ownr_ph1_ty} phone={job.ownr_ph1} jobid={job.id} />
                 )}
               </DataLabel>
-              <DataLabel key="22" label={t("jobs.fields.ownr_ph2")}>
+              <DataLabel key="3" label={t("jobs.fields.ownr_ph2")}>
                 {disabled || isPartsEntry ? (
                   <PhoneNumberFormatter type={job.ownr_ph2_ty}>{job.ownr_ph2}</PhoneNumberFormatter>
                 ) : (
                   <ChatOpenButton type={job.ownr_ph2_ty} phone={job.ownr_ph2} jobid={job.id} />
                 )}
               </DataLabel>
-              <DataLabel key="3" label={t("owners.fields.address")}>
+              <DataLabel key="4" label={t("owners.fields.address")}>
                 {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
                   job.ownr_city || ""
                 } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
               </DataLabel>
-              <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
+              <DataLabel key="5" label={t("owners.fields.ownr_ea")}>
                 {disabled || isPartsEntry ? (
                   <>{job.ownr_ea || ""}</>
                 ) : job.ownr_ea ? (
@@ -280,13 +280,14 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                 ) : null}
               </DataLabel>
               {job.owner?.tax_number && (
-                <DataLabel key="5" label={t("owners.fields.tax_number")}>
+                <DataLabel key="6" label={t("owners.fields.tax_number")}>
                   {job.owner?.tax_number || ""}
                 </DataLabel>
               )}
               <DataLabel
                 label={t("owners.fields.note")}
                 styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}
+                key="7"
               >
                 {job.owner?.note || ""}
               </DataLabel>