From 05f586a86aa2671a1655df071d191f663bbb9241 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 25 Sep 2025 13:39:26 -0700
Subject: [PATCH] Fix long label trunctaion on the host details page (#33451)

## For #27876


![ezgif-3d033066375155](https://github.com/user-attachments/assets/f4d358c3-8b3d-4aed-8193-b32fd7b2510b)


- [x] Changes file added for user-visible changes in `changes/`
- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/27876-host-details-labels                   |  1 +
 .../pages/hosts/details/cards/Labels/Labels.tsx     | 13 ++++++++++---
 .../pages/hosts/details/cards/Labels/_styles.scss   |  9 +++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 changes/27876-host-details-labels
 create mode 100644 frontend/pages/hosts/details/cards/Labels/_styles.scss

diff --git a/changes/27876-host-details-labels b/changes/27876-host-details-labels
new file mode 100644
index 0000000000..4d7b771550
--- /dev/null
+++ b/changes/27876-host-details-labels
@@ -0,0 +1 @@
+- Elegantly handle host details page label pills for labels with very long names
diff --git a/frontend/pages/hosts/details/cards/Labels/Labels.tsx b/frontend/pages/hosts/details/cards/Labels/Labels.tsx
index 021daddfc6..884c256260 100644
--- a/frontend/pages/hosts/details/cards/Labels/Labels.tsx
+++ b/frontend/pages/hosts/details/cards/Labels/Labels.tsx
@@ -7,6 +7,7 @@ import classnames from "classnames";
 import Card from "components/Card";
 import CardHeader from "components/CardHeader";
 import { LABEL_DISPLAY_MAP } from "utilities/constants";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 
 const baseClass = "labels-card";
 
@@ -31,9 +32,15 @@ const Labels = ({
           variant="pill"
           className="list__button"
         >
-          {label.label_type === "builtin" && label.name in LABEL_DISPLAY_MAP
-            ? LABEL_DISPLAY_MAP[label.name as keyof typeof LABEL_DISPLAY_MAP]
-            : label.name}
+          <TooltipTruncatedText
+            value={
+              label.label_type === "builtin" && label.name in LABEL_DISPLAY_MAP
+                ? LABEL_DISPLAY_MAP[
+                    label.name as keyof typeof LABEL_DISPLAY_MAP
+                  ]
+                : label.name
+            }
+          />
         </Button>
       </li>
     );
diff --git a/frontend/pages/hosts/details/cards/Labels/_styles.scss b/frontend/pages/hosts/details/cards/Labels/_styles.scss
new file mode 100644
index 0000000000..20ae38f568
--- /dev/null
+++ b/frontend/pages/hosts/details/cards/Labels/_styles.scss
@@ -0,0 +1,9 @@
+.labels-card {
+  .button,
+  .children-wrapper {
+    max-width: 100%;
+    .__react_component_tooltip {
+      font-weight: $regular;
+    }
+  }
+}