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

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;