Fleet UI: Truncated cells have responsive size tooltips, hides default browser tooltip (#8300)

frontend/components/TableContainer/DataTable/TruncatedTextCell/TruncatedTextCell.tsx

@@ -8,6 +8,8 @@ interface ITruncatedTextCellProps {
   classes?: string;
 }
 
+const baseClass = "truncated-cell";
+
 const TruncatedTextCell = ({
   value,
   classes = "w250",
@@ -28,7 +30,7 @@ const TruncatedTextCell = ({
   const tooltipDisabled = offsetWidth === scrollWidth;
 
   return (
-    <div ref={ref} className={`${classes}`}>
+    <div ref={ref} className={`${baseClass} ${classes}`}>
       <div
         className={"data-table__truncated-text"}
         data-tip
@@ -49,8 +51,9 @@ const TruncatedTextCell = ({
         backgroundColor="#3e4771"
         id={id}
         data-html
+        className={"truncated-tooltip"} // responsive widths
       >
-        <span className={`tooltip tooltip-text`}>{value}</span>
+        {value}
       </ReactTooltip>
     </div>
   );

frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss

@@ -1,14 +1,47 @@
-.data-table__truncated-text {
-  &--cell {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 101%;
+.truncated-cell {
+  .data-table__truncated-text {
+    &--cell {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 101%;
+    }
+
+    .truncated {
+      display: inline-block;
+      max-width: 100%;
+
+      &:hover {
+        cursor: help;
+      }
+
+      // Removes secondary unstyled tooltip created by browser
+      &::after {
+        content: "";
+        display: block;
+      }
+    }
   }
 
-  .truncated {
-    display: inline-block;
-    max-width: 100%;
+  // Responsive design overrides react-tooltip width that overflows off screen
+  .truncated-tooltip {
+    max-width: 300px;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    display: block;
+    white-space: pre-wrap;
+  }
+
+  @media (min-width: $break-990) {
+    .truncated-tooltip {
+      max-width: 400px;
+    }
+  }
+
+  @media (min-width: $break-1400) {
+    .truncated-tooltip {
+      max-width: 800px;
+    }
   }
 }