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