From d4455633caeab3dcc40b6ddc75e7b71a9c98b971 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Tue, 19 Nov 2024 20:58:59 -0500
Subject: [PATCH 1/2] fix: update legacy DataTable

---
 .../src/DataTable/DataTable.tsx               | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
index e60e041c7f..f175298736 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -726,12 +726,28 @@ const DataTable = ({
     // Reordering
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
     enableRowDragging: hasRowReordering && Boolean(onReorderRows),
-    muiTableBodyRowProps: ({ table, row }) => ({
+    muiDetailPanelProps: ({ row }) => ({
+      sx: {
+        paddingBlock: row.getIsExpanded()
+          ? `${odysseyDesignTokens.Spacing3} !important`
+          : undefined,
+      },
+    }),
+    muiTableBodyRowProps: ({ table, row, isDetailPanel }) => ({
       className: draggableTableBodyRowClassName({
         currentRowId: row.id,
         draggingRowId: draggingRow?.id,
         hoveredRowId: table.getState().hoveredRow?.id,
       }),
+      sx: isDetailPanel
+        ? {
+            paddingBlock: "0 !important",
+            border: 0,
+            ["&:hover"]: {
+              backgroundColor: `${odysseyDesignTokens.HueNeutralWhite} !important`,
+            },
+          }
+        : {},
     }),
     muiRowDragHandleProps: ({ table, row }) => ({
       onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),
@@ -778,10 +794,7 @@ const DataTable = ({
     // Refs
     muiTableProps: {
       ref: tableContentRef,
-      className:
-        !shouldDisplayRowActions && hasColumnResizing
-          ? "ods-hide-spacer-column"
-          : "",
+      className: !shouldDisplayRowActions && hasColumnResizing ? "" : "",
     },
 
     muiTableContainerProps: {

From 8d08b26e759934a17a6da09d6a1eb5296795cd0c Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Tue, 19 Nov 2024 21:19:01 -0500
Subject: [PATCH 2/2] fix: ensure long lines can wrap if needed

---
 packages/odyssey-react-mui/src/DataTable/DataTable.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
index f175298736..00ed87560e 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -721,6 +721,10 @@ const DataTable = ({
     },
     muiTableBodyCellProps: ({ column }) => ({
       className: column.getIsResizing() ? "isResizing" : "",
+      sx: {
+        overflowWrap: "anywhere",
+        maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
+      },
     }),
 
     // Reordering