Fix similar and perturbed long utterances

CHANGELOG.md

@@ -19,5 +19,6 @@ Released changes are shown in the
 ### Removed
 
 ### Fixed
+- Showing long utterances fully on hover in similar and perturbed utterances tables.
 
 ### Security

webapp/src/components/Utterance/PerturbedUtterances.tsx

@@ -1,5 +1,6 @@
 import { Box, Tooltip, Typography } from "@mui/material";
 import { GridCellParams } from "@mui/x-data-grid";
+import HoverableDataCell from "components/Analysis/HoverableDataCell";
 import CheckIcon from "components/Icons/Check";
 import XIcon from "components/Icons/X";
 import { Column, Table } from "components/Table";
@@ -89,6 +90,14 @@ export const perturbedUtterancesColumns: Column<Row>[] = [
     flex: 1,
     minWidth: 408,
     sortable: false,
+    cellClassName: "hoverableDataCell",
+    renderCell: ({ value }: GridCellParams<string>) => (
+      <HoverableDataCell>
+        <Typography variant="inherit" whiteSpace="pre-wrap">
+          {value}
+        </Typography>
+      </HoverableDataCell>
+    ),
   },
   {
     field: "prediction",
@@ -171,6 +180,11 @@ const PerturbedUtterances: React.FC<Props> = (props) => {
       error={error}
       loading={isFetching}
       rows={rows}
+      sx={{
+        "& .hoverableDataCell": {
+          position: "relative",
+        },
+      }}
     />
   );
 };

webapp/src/components/Utterance/SimilarUtterances.tsx

@@ -1,7 +1,8 @@
 import { Warning } from "@mui/icons-material";
-import { Tooltip } from "@mui/material";
+import { Tooltip, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { GridCellParams, GridRow } from "@mui/x-data-grid";
+import HoverableDataCell from "components/Analysis/HoverableDataCell";
 import CopyButton from "components/CopyButton";
 import { Column, RowProps, Table } from "components/Table";
 import VisualBar from "components/VisualBar";
@@ -19,6 +20,9 @@ const useStyles = makeStyles(() => ({
       visibility: "hidden",
     },
   },
+  hoverableDataCell: {
+    position: "relative",
+  },
 }));
 
 type Row = SimilarUtterance & { id: number };
@@ -59,6 +63,14 @@ const SimilarUtterances: React.FC<Props> = ({
       headerName: "Similar Utterance",
       flex: 1,
       sortable: false,
+      cellClassName: classes.hoverableDataCell,
+      renderCell: ({ value }: GridCellParams<string>) => (
+        <HoverableDataCell>
+          <Typography variant="inherit" whiteSpace="pre-wrap">
+            {value}
+          </Typography>
+        </HoverableDataCell>
+      ),
     },
     {
       field: "utteranceCopyButton",