fix: OPTIC-108: Text on grid view should be truncated

src/components/DataGroups/AudioDataGroup.js

@@ -2,10 +2,10 @@ import { MediaPlayer } from "../Common/MediaPlayer/MediaPlayer";
 
 export const AudioDataGroup = ({ value }) => {
   return (
-    <div style={{ padding: 10, height: AudioDataGroup.height }}>
+    <div style={{ padding: 10, height: AudioDataGroup.height, boxSizing: "content-box" }}>
       <MediaPlayer src={value} />
     </div>
   );
 };
 
-AudioDataGroup.height = 42;
+AudioDataGroup.height = 32;

src/components/DataGroups/TextDataGroup.js

@@ -1,21 +1,27 @@
+import { Tooltip } from "../Common/Tooltip/Tooltip";
+
 const valueToString = (value) => {
   if (typeof value === "string") return value;
 
   try {
     return JSON.stringify(value);
   } catch {
-    return value.toString();
+    return (value ?? "").toString();
   }
 };
 
 export const TextDataGroup = ({ value }) => {
+  const output = valueToString(value);
+
   return (
-    <div
-      style={{ padding: 5, height: TextDataGroup.height, overflow: "hidden" }}
-    >
-      {value ? valueToString(value) : ""}
-    </div>
+    <Tooltip title={output}>
+      <div
+        style={{ padding: 5, height: TextDataGroup.height, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}
+      >
+        {output}
+      </div>
+    </Tooltip>
   );
 };
 
-TextDataGroup.height = 77;
+TextDataGroup.height = 32;