Fleet UI: Tooltip shows dynamically on truncated text only (#20420)

frontend/components/QueryFrequencyIndicator/_styles.scss

@@ -1,12 +1,12 @@
 .query-frequency-indicator {
   width: 90px;
-  display: flex;
   align-items: center;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 
   .icon {
+    vertical-align: middle;
     padding-right: $pad-small;
   }
 }

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

@@ -49,7 +49,7 @@ const TooltipTruncatedTextCell = ({
   const isDefaultValue = value === DEFAULT_EMPTY_CELL_VALUE;
 
   return (
-    <div ref={ref} className={classNames}>
+    <div className={classNames}>
       <div
         className="data-table__tooltip-truncated-text"
         data-tip
@@ -57,6 +57,7 @@ const TooltipTruncatedTextCell = ({
         data-tip-disable={isDefaultValue || tooltipDisabled}
       >
         <span
+          ref={ref}
           className={`data-table__tooltip-truncated-text--cell ${
             isDefaultValue ? "text-muted" : ""
           } ${tooltipDisabled ? "" : "truncated"}`}

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

@@ -16,6 +16,7 @@
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
+      vertical-align: middle;
     }
   }
 

frontend/components/TooltipTruncatedText/_styles.scss

@@ -1,4 +1,11 @@
+/** Modify with extreme caution as this CSS:
+- determines whether a tooltip is being rendered via useRef
+- is implemented in widely used checkbox labels
+- is highly sensitive */
+
 .tooltip-truncated-text {
+  max-width: 101%; // Required for implementation in checkbox labels
+
   .tooltip-truncated {
     max-width: 100%;
   }
@@ -8,6 +15,7 @@
     max-width: 99%;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
   }
 
   .inner-text {

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

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

frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/_styles.scss

@@ -5,7 +5,7 @@
   gap: $pad-small;
 
   &__failed-message {
-    min-width: 100px;
+    min-width: 168px; // Aligns resend button to right end
 
     .data-table__tooltip-truncated-text--cell {
       // for some reason this is need to vertically align the text and

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

@@ -12,8 +12,7 @@ import {
   isWindowsDiskEncryptionStatus,
 } from "interfaces/mdm";
 
-import TextCell from "components/TableContainer/DataTable/TextCell";
-
+import TooltipTruncatedTextCell from "components/TableContainer/DataTable/TooltipTruncatedTextCell";
 import OSSettingStatusCell from "./OSSettingStatusCell";
 import { generateWinDiskEncryptionProfile } from "../../helpers";
 import OSSettingsErrorCell from "./OSSettingsErrorCell";
@@ -53,7 +52,7 @@ const generateTableConfig = (
       accessor: "name",
       Cell: (cellProps: ITableStringCellProps) => {
         return (
-          <TextCell
+          <TooltipTruncatedTextCell
             value={cellProps.cell.value}
             className="os-settings-name-cell"
           />

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

@@ -22,7 +22,7 @@
       tbody {
         tr {
           .name__cell {
-            max-width: 0; // sets ellipses
+            max-width: 0; // sets ellipsis
           }
 
           .policy-link {
@@ -36,7 +36,7 @@
             }
           }
           .policy-info {
-            width: 100%; // sets ellipses
+            width: 100%; // sets ellipsis
             justify-content: left;
 
             .policy-info-text {

frontend/pages/policies/ManagePoliciesPage/_styles.scss

@@ -234,13 +234,34 @@
 
     .checkbox-row {
       display: flex;
+      max-width: 100%;
       padding: 8px 12px;
       justify-content: space-between;
       align-items: center;
       align-self: stretch;
       border-bottom: 1px solid $ui-fleet-black-10;
+      gap: 20px;
+
+      .form-field--checkbox {
+        flex: 1 1 0%; /* This allows growing and shrinking */
+        min-width: 0; /* This is crucial for proper shrinking */
+      }
+
+      .fleet-checkbox__tick {
+        flex: 0 0 auto; /* This prevents growing and shrinking */
+        width: fit-content; /* This ensures button isn't cut off */
+      }
+
+      .fleet-checkbox__label {
+        display: flex;
+        white-space: nowrap;
+        flex: 1 1 0%; /* This allows growing and shrinking */
+        min-width: 0; /* This is crucial for proper shrinking */
+      }
 
       &__preview-button {
+        flex: 0 0 auto; /* This prevents growing and shrinking */
+        width: fit-content; /* This ensures button isn't cut off */
         visibility: hidden;
       }
 

frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx

@@ -2,8 +2,8 @@ import React, { useCallback, useState, useEffect } from "react";
 
 import { IPolicyStats } from "interfaces/policy";
 
+import { syntaxHighlight } from "utilities/helpers";
 import validURL from "components/forms/validators/valid_url";
-
 import Button from "components/buttons/Button";
 import RevealButton from "components/buttons/RevealButton";
 import CustomLink from "components/CustomLink";
@@ -12,7 +12,7 @@ import Slider from "components/forms/fields/Slider";
 import InputField from "components/forms/fields/InputField";
 import Modal from "components/Modal";
 import Checkbox from "components/forms/fields/Checkbox";
-import { syntaxHighlight } from "utilities/helpers";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 import Icon from "components/Icon";
 import CalendarEventPreviewModal from "../CalendarEventPreviewModal";
 import CalendarPreview from "../../../../../../assets/images/calendar-preview-720x436@2x.png";
@@ -198,22 +198,20 @@ const CalendarEventsModal = ({
                     onPolicyEnabledChange({ name, value: !isChecked });
                   }}
                 >
-                  {name}
+                  <TooltipTruncatedText value={name} />
                 </Checkbox>
-                <div>
-                  <Button
-                    variant="text-icon"
-                    onClick={() => {
-                      setSelectedPolicyToPreview(
-                        policies.find((p) => p.id === id)
-                      );
-                      togglePreviewCalendarEvent();
-                    }}
-                    className="checkbox-row__preview-button"
-                  >
-                    <Icon name="eye" /> Preview
-                  </Button>
-                </div>
+                <Button
+                  variant="text-icon"
+                  onClick={() => {
+                    setSelectedPolicyToPreview(
+                      policies.find((p) => p.id === id)
+                    );
+                    togglePreviewCalendarEvent();
+                  }}
+                  className="checkbox-row__preview-button"
+                >
+                  <Icon name="eye" /> Preview
+                </Button>
               </div>
             );
           })}

frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx

@@ -26,6 +26,7 @@ import Radio from "components/forms/fields/Radio";
 import validUrl from "components/forms/validators/valid_url";
 import RevealButton from "components/buttons/RevealButton";
 import CustomLink from "components/CustomLink";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 import ExampleTicket from "../ExampleTicket";
 import ExamplePayload from "../ExamplePayload";
 
@@ -427,7 +428,7 @@ const OtherWorkflowsModal = ({
                                 setErrors((errs) => omit(errs, "policyItems"));
                             }}
                           >
-                            {name}
+                            <TooltipTruncatedText value={name} />
                           </Checkbox>
                         </div>
                       );

frontend/pages/queries/ManageQueriesPage/components/ManageQueryAutomationsModal/ManageQueryAutomationsModal.tsx

@@ -9,6 +9,7 @@ import QueryFrequencyIndicator from "components/QueryFrequencyIndicator/QueryFre
 import LogDestinationIndicator from "components/LogDestinationIndicator/LogDestinationIndicator";
 
 import { ISchedulableQuery } from "interfaces/schedulable_query";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 
 interface IManageQueryAutomationsModalProps {
   isUpdatingAutomations: boolean;
@@ -135,7 +136,7 @@ const ManageQueryAutomationsModal = ({
                           //   setErrors((errs) => omit(errs, "queryItems"));
                         }}
                       >
-                        {name}
+                        <TooltipTruncatedText value={name} />
                       </Checkbox>
                       <QueryFrequencyIndicator
                         frequency={interval}