From 31f81ede830950e2d91d423554bd564bf98438f5 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 29 Oct 2025 13:49:46 +0000
Subject: [PATCH] fix text alignment for host status pill (#34851)

**Related issue:** Fixes #34820

This fixes the text alignment of the tooltip for the host status pill.
We replace the current tooltip implementationt use TooltipWrapper so
that its consistant with all other tooltips
---
 .../details/cards/HostHeader/HostHeader.tsx   | 19 +++++++------------
 .../details/cards/HostHeader/helpers.tsx      | 11 ++++++++---
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/pages/hosts/details/cards/HostHeader/HostHeader.tsx b/frontend/pages/hosts/details/cards/HostHeader/HostHeader.tsx
index 1a3eade04e..29a2a78392 100644
--- a/frontend/pages/hosts/details/cards/HostHeader/HostHeader.tsx
+++ b/frontend/pages/hosts/details/cards/HostHeader/HostHeader.tsx
@@ -179,19 +179,14 @@ const HostHeader = ({
 
     return (
       <>
-        <span className={classNames} data-tip data-for="tag-tooltip">
-          {tag.title}
-        </span>
-        <ReactTooltip
-          place="top"
-          effect="solid"
-          id="tag-tooltip"
-          backgroundColor={COLORS["tooltip-bg"]}
+        <TooltipWrapper
+          tipContent={tag.generateTooltip(platform)}
+          position="top"
+          underline={false}
+          showArrow
         >
-          <span className={`${baseClass}__tooltip-text`}>
-            {tag.generateTooltip(platform)}
-          </span>
-        </ReactTooltip>
+          <span className={classNames}>{tag.title}</span>
+        </TooltipWrapper>
       </>
     );
   };
diff --git a/frontend/pages/hosts/details/cards/HostHeader/helpers.tsx b/frontend/pages/hosts/details/cards/HostHeader/helpers.tsx
index 007c67c6be..71585c0e5b 100644
--- a/frontend/pages/hosts/details/cards/HostHeader/helpers.tsx
+++ b/frontend/pages/hosts/details/cards/HostHeader/helpers.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { isMacOS, isAppleDevice, isIPadOrIPhone } from "interfaces/platform";
+import { isMacOS, isIPadOrIPhone } from "interfaces/platform";
 import { HostMdmDeviceStatusUIState } from "../../helpers";
 
 interface IDeviceStatusTag {
@@ -61,8 +61,13 @@ export const DEVICE_STATUS_TAGS: DeviceStatusTagConfig = {
   locking: {
     title: "LOCK PENDING",
     tagType: "warning",
-    generateTooltip: () =>
-      "Host will lock when it comes online.  If the host is online, it will lock the next time it checks in to Fleet.",
+    generateTooltip: () => (
+      <>
+        Host will lock when it comes online. If the host is
+        <br />
+        online, it will lock the next time it checks in to Fleet.
+      </>
+    ),
   },
   wiped: {
     title: "WIPED",