feature/IO-3554-Form-Row-Layout - Modify how truncation works on responsive tables.

client/src/components/jobs-list/jobs-list.component.jsx

@@ -184,12 +184,15 @@ export function JobsList({ bodyshop }) {
         ),
       sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
       render: (text, record) => {
+        const vehicleLabel =
+          `${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`.trim();
+
         return record.vehicleid ? (
           <Link to={"/manage/vehicles/" + record.vehicleid} onClick={(e) => e.stopPropagation()}>
-            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}
+            <span className="ellipses">{vehicleLabel}</span>
           </Link>
         ) : (
-          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+          <span className="ellipses">{vehicleLabel}</span>
         );
       }
     },

client/src/components/responsive-table/responsive-table.component.jsx

@@ -1,9 +1,12 @@
 import { Grid, Table } from "antd";
 import { useMemo } from "react";
+import "./responsive-table.styles.scss";
 
-function ResponsiveTable({ columns, mobileColumnKeys, scroll, ...rest }) {
+function ResponsiveTable({ className, columns, mobileColumnKeys, scroll, tableLayout, ...rest }) {
   const screens = Grid.useBreakpoint();
   const isPhone = !screens.md;
+  const isCompactViewport = !screens.lg;
+  const prefersHorizontalScroll = isPhone || isCompactViewport;
   const isResponsiveFilteringEnabled = ["1", "true", "yes", "on"].includes(
     String(import.meta.env.VITE_APP_ENABLE_RESPONSIVE_TABLE_FILTERING || "")
       .trim()
@@ -38,9 +41,53 @@ function ResponsiveTable({ columns, mobileColumnKeys, scroll, ...rest }) {
     return filteredColumns.length > 0 ? filteredColumns : columns;
   }, [columns, isPhone, isResponsiveFilteringEnabled, mobileColumnKeys]);
 
-  const resolvedScroll = scroll ?? { x: "max-content" };
+  const resolvedScroll = useMemo(() => {
+    if (prefersHorizontalScroll) {
+      if (scroll == null) {
+        return { x: "max-content" };
+      }
 
-  return <Table columns={resolvedColumns} scroll={resolvedScroll} {...rest} />;
+      if (typeof scroll !== "object" || Array.isArray(scroll)) {
+        return scroll;
+      }
+
+      const { x, ...baseScroll } = scroll;
+
+      return { ...baseScroll, x: x ?? "max-content" };
+    }
+
+    if (scroll == null) {
+      // Explicitly override ConfigProvider table.scroll desktop defaults.
+      return {};
+    }
+
+    if (typeof scroll !== "object" || Array.isArray(scroll)) {
+      return scroll;
+    }
+
+    const { x, ...desktopScroll } = scroll;
+
+    // On desktop we prefer fitting columns with ellipsis over forced horizontal scroll.
+    if (x == null) {
+      return desktopScroll;
+    }
+
+    return desktopScroll;
+  }, [prefersHorizontalScroll, scroll]);
+
+  const resolvedTableLayout = tableLayout ?? (prefersHorizontalScroll ? "auto" : "fixed");
+  const responsiveClassName = prefersHorizontalScroll ? undefined : "responsive-table-fit";
+  const resolvedClassName = [responsiveClassName, className].filter(Boolean).join(" ");
+
+  return (
+    <Table
+      className={resolvedClassName}
+      columns={resolvedColumns}
+      scroll={resolvedScroll}
+      tableLayout={resolvedTableLayout}
+      {...rest}
+    />
+  );
 }
 
 ResponsiveTable.Summary = Table.Summary;

client/src/components/responsive-table/responsive-table.styles.scss

@@ -0,0 +1,27 @@
+.responsive-table-fit .ant-table-cell,
+.responsive-table-fit .ant-table-cell > * {
+  min-width: 0;
+}
+
+.responsive-table-fit .ant-table-content > table {
+  width: 100%;
+}
+
+.responsive-table-fit .ant-table-column-sorters {
+  width: 100%;
+}
+
+.responsive-table-fit .ant-table-column-title,
+.responsive-table-fit .ant-space,
+.responsive-table-fit .ant-space-item {
+  min-width: 0;
+}
+
+.responsive-table-fit .ant-table-cell-ellipsis > a,
+.responsive-table-fit .ant-table-cell-ellipsis > span {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

server/web-sockets/createLogEvent.js

@@ -1,7 +1,6 @@
 const { isArray } = require("lodash");
 const logger = require("../utils/logger");
 
-
 function createLogEvent(socket, level, message) {
   if (LogLevelHierarchy(socket.log_level) >= LogLevelHierarchy(level)) {
     // console.log(`[WS LOG EVENT] ${level} - ${new Date()} - ${socket.user.email} - ${socket.id} - ${message}`);