IO-2143 Add truncation for long vehicle notes.

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

@@ -8,6 +8,8 @@ export default function DataLabel({
   vertical,
   visible = true,
   valueStyle = {},
+  valueClassName,
+  onValueClick,
   ...props
 }) {
   if (!visible || (hideIfNull && !!!children)) return null;
@@ -28,7 +30,10 @@ export default function DataLabel({
           marginLeft: ".3rem",
           fontWeight: "bolder",
           wordWrap: "break-word",
+          cursor: onValueClick !== undefined ? "pointer" : "",
         }}
+        className={valueClassName}
+        onClick={onValueClick}
       >
         {typeof children === "string" ? (
           <Typography.Text style={valueStyle}>{children}</Typography.Text>

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

@@ -5,7 +5,7 @@ import {
   BranchesOutlined,
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tag, Tooltip } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -56,7 +56,7 @@ const colSpan = {
 
 export function JobsDetailHeader({ job, bodyshop, disabled }) {
   const { t } = useTranslation();
-
+  const [notesClamped, setNotesClamped] = useState(true);
   const vehicleTitle = `${job.v_model_yr || ""} ${job.v_color || ""}
   ${job.v_make_desc || ""} 
   ${job.v_model_desc || ""}`.trim();
@@ -229,6 +229,8 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
               <DataLabel
                 label={t("vehicles.fields.notes")}
                 valueStyle={{ whiteSpace: "pre-wrap" }}
+                valueClassName={notesClamped ? "clamp" : ""}
+                onValueClick={() => setNotesClamped(!notesClamped)}
               >
                 {job.vehicle.notes}
               </DataLabel>

client/src/components/jobs-detail-header/jobs-detail-header.styles.scss

@@ -6,3 +6,12 @@
   display: flex;
   flex-wrap: wrap;
 }
+
+.clamp {
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+}