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

@@ -0,0 +1 @@
+- Elegantly handle host details page label pills for labels with very long names

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>
     );

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;
+    }
+  }
+}