Update "used by" display and tooltip styling (#26262)

For #25283 

# Checklist for submitter

- [X] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.

## Details

This PR updates the styling on the "Used by" line of the host details
page in the following ways:

* Updated color of the "more..." text
* Truncated long email address with ellipses
* Tooltip displays _all_ email addresses (in case the first one was
truncated)

## Screenshots

With extra long email:
<img width="353" alt="image"
src="https://github.com/user-attachments/assets/1e6dc535-c40d-44b6-a3ad-86920ac06772"
/>

---

Tooltips:
<img width="386" alt="image"
src="https://github.com/user-attachments/assets/8138e666-18f9-4e3b-a26a-99dc5b0492e7"
/>
<img width="455" alt="image"
src="https://github.com/user-attachments/assets/ef3ac552-b4ee-42ca-a522-aefacb4c9227"
/>

---

With regular email:
<img width="273" alt="image"
src="https://github.com/user-attachments/assets/88fae2c8-a2c8-4dd7-8a67-a8d9e33b7f08"
/>

---

With one email:
<img width="220" alt="image"
src="https://github.com/user-attachments/assets/198cf108-a8b7-4856-aa46-46e4a7676ef5"
/>

---

With one long email:
<img width="314" alt="image"
src="https://github.com/user-attachments/assets/0d781689-3140-41e2-be8c-a0c9b2542b35"
/>

changes/25283-update-device-users-tooltip

@@ -0,0 +1 @@
+- Updated the styling of the "Used by" line on host details page to be easier to read and include more data in the tooltip

frontend/pages/hosts/details/cards/About/About.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { HumanTimeDiffWithFleetLaunchCutoff } from "components/HumanTimeDiffWithDateTip";
 import TooltipWrapper from "components/TooltipWrapper";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 import Card from "components/Card";
 
 import {
@@ -16,6 +17,7 @@ import {
   BATTERY_TOOLTIP,
 } from "utilities/constants";
 import DataSet from "components/DataSet";
+import classnames from "classnames";
 
 const getDeviceUserTipContent = (deviceMapping: IDeviceUser[]) => {
   if (deviceMapping.length === 0) {
@@ -130,29 +132,39 @@ const About = ({
         displayPrimaryUser = email;
       } else {
         displayPrimaryUser = (
-          <>
+          <span className={`${baseClass}__device-mapping__primary-user`}>
             {email}{" "}
-            <span className="device-mapping__source">{`(${source})`}</span>
-          </>
+            <span
+              className={`${baseClass}__device-mapping__source`}
+            >{`(${source})`}</span>
+          </span>
         );
       }
     }
     return (
       <DataSet
         title="Used by"
         value={
-          newDeviceMapping.length > 1 ? (
-            <TooltipWrapper
-              tipContent={getDeviceUserTipContent(newDeviceMapping)}
-            >
-              {displayPrimaryUser}
-              <span className="device-mapping__more">{` +${
-                newDeviceMapping.length - 1
-              } more`}</span>
-            </TooltipWrapper>
-          ) : (
-            displayPrimaryUser
-          )
+          <div className={`${baseClass}__used-by`}>
+            {newDeviceMapping.length > 1 ? (
+              <>
+                <span className={`${baseClass}__multiple`}>
+                  <TooltipTruncatedText value={displayPrimaryUser} />
+                </span>
+                <TooltipWrapper
+                  tipContent={getDeviceUserTipContent(newDeviceMapping)}
+                >
+                  <span className="device-mapping__more">{` +${
+                    newDeviceMapping.length - 1
+                  } more`}</span>
+                </TooltipWrapper>
+              </>
+            ) : (
+              <span className={`${baseClass}__single`}>
+                <TooltipTruncatedText value={displayPrimaryUser} />
+              </span>
+            )}
+          </div>
         }
       />
     );

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

@@ -1,4 +1,40 @@
 .about-card {
+
+  .truncated-tooltip {
+    .about-card__device-mapping__source {
+        color: inherit;
+      }
+  }
+
+  &__used-by {
+    display: flex;
+  }
+
+  &__multiple {
+    max-width: 270px;
+    padding-right: 5px;
+  }
+
+  &__single {
+    max-width: 300px;
+  }
+
+  &__device-mapping {
+    &__source {
+      color: $ui-fleet-black-75;
+    }
+
+    &__more {
+      color: $ui-fleet-black-50;
+    }
+
+    &__primary-user {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      vertical-align: text-bottom;
+    }
+  }
+
   // Adjusts for edge cases of extra long MDM server URL and used by email
   .info-flex {
     display: flex;
@@ -16,18 +52,7 @@
     .component__tooltip-wrapper__element {
       max-width: 350px;
     }
-
-    &__data {
-      .device-mapping {
-        &__source {
-          color: $ui-fleet-black-75;
-        }
-        &__more {
-          color: $ui-fleet-black-50;
-        }
-      }
-    }
-
+
     @media (min-width: $break-md) {
       max-height: 250px;