feature/IO-3545-Production-Board-List-DND - Checkpoint

client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx

@@ -94,29 +94,30 @@ export function ProductionListEmpAssignment({ insertAuditTrail, bodyshop, record
 
   const [visibility, setVisibility] = useState(false);
   const onChange = (e, option) => {
-    setAssignment({ ...assignment, employeeid: e, name: option.name });
+    setAssignment({ ...assignment, employeeid: e, name: option.label });
   };
 
+  const employeeOptions = bodyshop.employees
+    .filter((emp) => emp.active)
+    .map((emp) => ({
+      value: emp.id,
+      label: `${emp.first_name} ${emp.last_name}`,
+      name: `${emp.first_name} ${emp.last_name}`
+    }));
+
   const popContent = (
     <Row gutter={[16, 16]}>
       <Col span={24}>
         <Select
           id="employeeSelector"
           showSearch={{
-            optionFilterProp: "children",
+            optionFilterProp: "label",
-            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }}
           style={{ width: 200 }}
           onChange={onChange}
-        >
+          options={employeeOptions}
-          {bodyshop.employees
+        />
-            .filter((emp) => emp.active)
-            .map((emp) => (
-              <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
-                {`${emp.first_name} ${emp.last_name}`}
-              </Select.Option>
-            ))}
-        </Select>
       </Col>
       <Col span={24}>
         <Space wrap>

client/src/components/production-list-table/production-list-table.component.jsx

@@ -43,7 +43,9 @@ function DraggableHeaderCell(props) {
     ...restProps.style,
     transform: CSS.Transform.toString(transform),
     transition,
-    opacity: isDragging ? 0.3 : 1
+    opacity: isDragging ? 0.3 : 1,
+    userSelect: "none",
+    textAlign: "left"
   };
 
   // If no columnKey, render as regular header
@@ -237,35 +239,51 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
   };
 
   const headerItem = (col) => {
-    const menu = {
+    const menu = { onClick: removeColumn, items: [{ key: col.key, label: t("production.actions.removecolumn") }] };
-      onClick: removeColumn,
-      items: [
-        {
-          key: col.key,
-          label: t("production.actions.removecolumn")
-        }
-      ]
-    };
 
     return (
-      <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "left",
+          width: "100%",
+          userSelect: "none",
+          minWidth: 0 // critical: allow the flex row to shrink
+        }}
+      >
         <span
           className="drag-handle-trigger"
           data-drag-handle="true"
           style={{
-            marginRight: "8px",
+            marginRight: 8,
             color: "#999",
             cursor: "grab",
-            padding: "4px",
+            padding: 4,
             display: "inline-flex",
-            alignItems: "center"
+            alignItems: "left",
+            userSelect: "none",
+            flex: "0 0 auto"
           }}
           title="Drag to reorder column"
         >
           <HolderOutlined />
         </span>
+
         <Dropdown className="prod-header-dropdown" menu={menu} trigger={["contextMenu"]}>
-          <span style={{ flex: 1, cursor: "default" }}>{col.title}</span>
+          <span
+            style={{
+              flex: "1 1 auto",
+              minWidth: 0, // critical: allow text to shrink
+              overflow: "hidden", // clip
+              textOverflow: "ellipsis", // show …
+              whiteSpace: "nowrap", // keep single line
+              cursor: "default",
+              userSelect: "none",
+              display: "block"
+            }}
+          >
+            {col.title}
+          </span>
         </Dropdown>
       </div>
     );
@@ -389,6 +407,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         <SortableContext items={columns.map((col) => col.key)} strategy={horizontalListSortingStrategy}>
           <Table
             sticky
+            tableLayout="fixed"
             pagination={false}
             size="small"
             {...(Production_List_Status_Colors.treatment === "on" && {

client/src/components/production-list-table/production-list-table.resizeable.component.jsx

@@ -14,14 +14,7 @@ const ResizableComponent = forwardRef((props, ref) => {
       height={0}
       onResize={onResize}
       draggableOpts={{ enableUserSelectHack: false }}
-      handle={
+      handle={<span className="react-resizable-handle" />}
-        <span
-          className="react-resizable-handle"
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        />
-      }
     >
       <th ref={ref} {...restProps} {...(dragAttributes || {})} {...(dragListeners || {})} />
     </Resizable>