Fleet UI: Update link cell truncation to remove white space (#41809)

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

@@ -12,17 +12,6 @@
     height: 24px;
   }
 
-  .software-name {
-    @include ellipse-text();
-    max-width: 300px;
-  }
-
-  @media (max-width: ($break-md - 1)) {
-    .software-name {
-      max-width: 250px;
-    }
-  }
-
   &__install-icon {
     // TODO: we do not want to use !important but have to for now. This is
     // the same issue as the .software-name-cell class display value.

frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx

@@ -14,8 +14,6 @@ interface ITooltipTruncatedTextCellProps {
   /** If set to `true` the text inside the tooltip will break on words instead of any character.
    * By default the tooltip text breaks on any character. Default: false */
   tooltipBreakOnWord?: boolean;
-  /** @deprecated use the prop `className` in order to add custom classes to this component */
-  classes?: string;
   className?: string;
   /** Content does not get truncated */
   prefix?: React.ReactNode;
@@ -29,12 +27,11 @@ const TooltipTruncatedTextCell = ({
   value,
   tooltip,
   tooltipBreakOnWord = false,
-  classes = "w250",
   className,
   prefix,
   suffix,
 }: ITooltipTruncatedTextCellProps): JSX.Element => {
-  const classNames = classnames(baseClass, classes, className, {
+  const classNames = classnames(baseClass, className, {
     "tooltip-break-on-word": tooltipBreakOnWord,
   });
 

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

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center; // For badges, etc
   gap: $pad-small;
+  max-width: 100%;
 
   .text-muted {
     color: $ui-fleet-black-50;

frontend/components/TableContainer/DataTable/_styles.scss

@@ -321,6 +321,8 @@ $shadow-transition-width: 10px;
           }
 
           &.link-cell--tooltip-truncate {
+            min-width: 100%; // Take up as much of cell as possible
+
             .data-table__tooltip-truncated-text-container {
               position: relative;
               @include bottom-border;

frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx

@@ -109,10 +109,11 @@ export const generateTableColumnConfigs = (
             className="script-info"
             onClick={onClickScriptName}
             variant="inverse"
+            size="small"
           >
             <TooltipTruncatedTextCell
               value={cellProps.row.original.name}
-              classes="w400"
+              className="w400" // Funky workaround for a truncation text cell WITHIN a button
             />
           </Button>
         );

frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss

@@ -27,6 +27,12 @@
     }
   }
 
+  .button {
+    .truncated-tooltip {
+      font-weight: $regular; // Undo button font-weight of 600 to match other tooltips 400
+    }
+  }
+
   // style a basic span that doesn't use the dropdown component (which relies on react-select
   // and makes it difficult for us to style the disabled tooltip underline on the placeholder text.
   .run-script-action--disabled {

frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tsx

@@ -330,8 +330,6 @@ const OSSettingsErrorCell = ({
         tooltipBreakOnWord
         tooltip={tooltip}
         value={value}
-        // we dont want the default "w250" class so we pass in empty string
-        classes=""
         className={
           isFailed || showRefetchButton || showRotateButton
             ? `${baseClass}__failed-message`

frontend/pages/hosts/details/cards/HostSoftwareLibrary/_styles.scss

@@ -83,6 +83,9 @@
       .data-table__table {
         tbody {
           tr {
+            .name__cell {
+              max-width: 250px;
+            }
             .status__cell {
               display: table-cell;
               min-width: 140px; // Fixed width when status changes after clicking install/uninstall

frontend/pages/hosts/details/cards/Software/_styles.scss

@@ -56,6 +56,11 @@
             max-width: px-to-rem(140);
           }
         }
+        tbody {
+          .name__cell {
+            max-width: 250px;
+          }
+        }
       }
 
       @media (max-width: ($break-sm - 1)) {