From ca1acc2467b120dc39addec2b2db77dae3760637 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 13 Jul 2026 15:37:07 -0700
Subject: [PATCH] Fleet UI: Show tooltip for truncated vulnerabilities list in
 Update details modal (#49236)

---
 changes/48987-vulnerabilities-tooltip         |  1 +
 .../TruncatedTextList/TruncatedTextList.tsx   | 31 +++----------------
 .../InventoryVersions/InventoryVersions.tsx   | 26 ++++------------
 .../components/InventoryVersions/_styles.scss | 17 ++++++++--
 .../InventoryVersionsModal.tests.tsx          |  5 +--
 5 files changed, 29 insertions(+), 51 deletions(-)
 create mode 100644 changes/48987-vulnerabilities-tooltip

diff --git a/changes/48987-vulnerabilities-tooltip b/changes/48987-vulnerabilities-tooltip
new file mode 100644
index 0000000000..9a4b384868
--- /dev/null
+++ b/changes/48987-vulnerabilities-tooltip
@@ -0,0 +1 @@
+- Fixed an issue where the truncated vulnerabilities list in the Update details modal did not show a tooltip listing the remaining CVEs.
diff --git a/frontend/components/TruncatedTextList/TruncatedTextList.tsx b/frontend/components/TruncatedTextList/TruncatedTextList.tsx
index 48c52feab1..c8319e0174 100644
--- a/frontend/components/TruncatedTextList/TruncatedTextList.tsx
+++ b/frontend/components/TruncatedTextList/TruncatedTextList.tsx
@@ -119,10 +119,6 @@ const renderVisibleRow = ({
 
   const isTruncatedFirst = visibleCount === 0;
   const content = isTruncatedFirst ? truncatedFirstContent : standardContent;
-  const rowStyle: React.CSSProperties = {
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-  };
   const rowClass = classnames(`${baseClass}__visible`, {
     [`${baseClass}__visible--truncated`]: isTruncatedFirst,
   });
@@ -130,16 +126,12 @@ const renderVisibleRow = ({
   if (onClick) {
     return (
       <Button variant="link" className={rowClass} onClick={onClick}>
-        <span style={rowStyle}>{content}</span>
+        <span>{content}</span>
       </Button>
     );
   }
 
-  return (
-    <span className={rowClass} style={rowStyle}>
-      {content}
-    </span>
-  );
+  return <span className={rowClass}>{content}</span>;
 };
 
 const TruncatedTextList = ({
@@ -207,24 +199,9 @@ const TruncatedTextList = ({
   const hidden = items.slice(visibleCount);
 
   return (
-    <div
-      ref={containerRef}
-      className={classnames(baseClass, className)}
-      style={{ position: "relative", minWidth: 0 }}
-    >
+    <div ref={containerRef} className={classnames(baseClass, className)}>
       {/* Hidden measurement layer — same font/size as the visible row */}
-      <div
-        className={`${baseClass}__measure`}
-        aria-hidden
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          visibility: "hidden",
-          pointerEvents: "none",
-          whiteSpace: "nowrap",
-        }}
-      >
+      <div className={`${baseClass}__measure`} aria-hidden>
         {items.map((item, i) => (
           <span
             // eslint-disable-next-line react/no-array-index-key
diff --git a/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx b/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx
index c40d3740a9..88bcba9eda 100644
--- a/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx
+++ b/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx
@@ -14,20 +14,7 @@ import {
 import Card from "components/Card";
 import DataSet from "components/DataSet";
 import TooltipWrapper from "components/TooltipWrapper";
-
-const generateVulnerabilitiesValue = (vulnerabilities: string[]) => {
-  const first3 = vulnerabilities.slice(0, 3);
-  const rest = vulnerabilities.slice(3);
-
-  const first3Text = first3.join(", ");
-  const restText = `, +${rest.length} more`;
-
-  return (
-    <>
-      <span>{`${first3Text}${rest.length > 0 ? restText : ""}`}</span>
-    </>
-  );
-};
+import TruncatedTextList from "components/TruncatedTextList";
 
 const baseClass = "inventory-versions";
 
@@ -97,15 +84,14 @@ const InventoryVersion = ({
             textOnly
           />
         )}
-      </div>
-      {vulnerabilities && vulnerabilities.length !== 0 && (
-        <div className={`${baseClass}__row`}>
+        {vulnerabilities && vulnerabilities.length !== 0 && (
           <DataSet
+            className={`${baseClass}__vulnerabilities`}
             title="Vulnerabilities"
-            value={generateVulnerabilitiesValue(vulnerabilities)}
+            value={<TruncatedTextList items={vulnerabilities} />}
           />
-        </div>
-      )}
+        )}
+      </div>
       {!!installedPaths?.length &&
         installedPaths.map((path) => {
           // Find the signature info for this path
diff --git a/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss b/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss
index 1ee0af3886..684fb92521 100644
--- a/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss
+++ b/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss
@@ -3,8 +3,8 @@
   flex-direction: column;
   gap: $pad-small;
 
-  .data-set dd {
-    white-space: initial;
+  dt {
+    white-space: nowrap;
   }
 
   &__versions {
@@ -20,9 +20,22 @@
   }
   &__row {
     display: flex;
+    flex-wrap: wrap;
     gap: $pad-xxlarge;
   }
 
+  // Fill the row so TruncatedTextList has a bounded width to measure against.
+  &__vulnerabilities {
+    flex: 1;
+    min-width: 0;
+
+    // dd is display:flex, so TruncatedTextList's outer div would size to its
+    // content by default and truncate too early. Stretch it to fill.
+    .truncated-text-list {
+      min-width: 100%;
+    }
+  }
+
   &__sig-info {
     display: flex;
     flex-direction: column;
diff --git a/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx b/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx
index 850979d98b..6bb61e0a1c 100644
--- a/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx
+++ b/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx
@@ -39,8 +39,9 @@ describe("SoftwareDetailsModal", () => {
     expect(screen.getByText("Hash:")).toBeVisible();
     expect(screen.getByText("mockhashhere")).toBeVisible();
 
-    // Vulnerabilities
-    expect(screen.getByText(/CVE-2020-0001/)).toBeVisible();
+    // Vulnerabilities — TruncatedTextList renders items in both a hidden
+    // measure layer and the visible row, so match all occurrences.
+    expect(screen.getAllByText(/CVE-2020-0001/).length).toBeGreaterThan(0);
 
     // Close button
     expect(screen.getByRole("button", { name: "Close" })).toBeVisible();