UI – Small adjustments to various Tooltipwrapper instances (#15170)

## Addresses #14244 

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -165,18 +165,18 @@ const PlatformWrapper = ({
     return (
       <div className={`${baseClass}__advanced--fleet-certificate`}>
         {type === "plain" ? (
-          <p className={`${baseClass}__advanced--heading`}>
+          <div className={`${baseClass}__advanced--heading`}>
             Download your Fleet certificate
-          </p>
+          </div>
         ) : (
-          <p
+          <div
             className={`${baseClass}__advanced--heading download-certificate--tooltip`}
           >
             Download your{" "}
             <TooltipWrapper tipContent="A Fleet certificate is required if Fleet is running with a self signed or otherwise untrusted certificate.">
               Fleet certificate:
             </TooltipWrapper>
-          </p>
+          </div>
         )}
         {isFetchingCertificate && (
           <p className={`${baseClass}__certificate-loading`}>

frontend/components/AddHostsModal/PlatformWrapper/_styles.scss

@@ -167,9 +167,6 @@
 
   .download-certificate--tooltip {
     margin-bottom: 0;
-    div {
-      display: inline;
-    }
   }
 
   &__copy-message {

frontend/components/TooltipWrapper/_styles.scss

@@ -3,6 +3,7 @@
 
   &__element {
     white-space: nowrap;
+    line-height: initial;
   }
 
   &__underline {

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -285,14 +285,4 @@
       top: -2px;
     }
   }
-
-  .mdm_enrollment_status__header,
-  .mdm_server_url__header {
-    .last-col-header-with-tip {
-      width: 180px;
-    }
-    .component__tooltip-wrapper__tip-text {
-      left: -156px; // Wide tooltip needs to be shifted left (edge case example when it's second to last column)
-    }
-  }
 }

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -444,7 +444,6 @@ const DeviceUserPage = ({
                     aboutData={aboutData}
                     deviceMapping={deviceMapping}
                     munki={deviceMacAdminsData?.munki}
-                    wrapFleetHelper={wrapFleetHelper}
                   />
                 </TabPanel>
                 <TabPanel>

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -719,7 +719,6 @@ const HostDetailsPage = ({
                 deviceMapping={deviceMapping}
                 munki={macadmins?.munki}
                 mdm={mdm}
-                wrapFleetHelper={wrapFleetHelper}
               />
               <div className="col-2">
                 <AgentOptionsCard

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

@@ -16,7 +16,6 @@ interface IAboutProps {
   deviceMapping?: IDeviceUser[];
   munki?: IMunkiData | null;
   mdm?: IHostMdmData;
-  wrapFleetHelper: (helperFn: (value: any) => string, value: string) => string;
 }
 
 const About = ({

frontend/utilities/constants.tsx

@@ -2,6 +2,7 @@ import URL_PREFIX from "router/url_prefix";
 import { OsqueryPlatform } from "interfaces/platform";
 import paths from "router/paths";
 import { ISchedulableQuery } from "interfaces/schedulable_query";
+import React from "react";
 
 const { origin } = global.window.location;
 export const BASE_URL = `${origin}${URL_PREFIX}/api`;
@@ -262,11 +263,30 @@ export const VULNERABLE_DROPDOWN_OPTIONS = [
 ];
 
 // Keys from API
-export const MDM_STATUS_TOOLTIP: Record<string, string> = {
-  "On (automatic)": `<span>MDM was turned on automatically using Apple Automated Device Enrollment (DEP), Windows Autopilot, or Windows Azure AD Join. Administrators can block end users from turning MDM off.</span>`,
-  "On (manual)": `<span>MDM was turned on manually. End users can turn MDM off.</span>`,
-  Off: `<span>Hosts with MDM off don&apos;t receive macOS <br /> settings and macOS update encouragement.</span>`,
-  Pending: `<span>Hosts ordered via Apple Business Manager <br /> (ABM). These will automatically enroll to Fleet <br /> and turn on MDM when they&apos;re unboxed.</span>`,
+export const MDM_STATUS_TOOLTIP: Record<string, string | React.ReactNode> = {
+  "On (automatic)": (
+    <span>
+      MDM was turned on automatically using Apple Automated Device Enrollment
+      (DEP), Windows Autopilot, or Windows Azure AD Join. Administrators can
+      block end users from turning MDM off.
+    </span>
+  ),
+  "On (manual)": (
+    <span>MDM was turned on manually. End users can turn MDM off.</span>
+  ),
+  Off: (
+    <span>
+      Hosts with MDM off don&apos;t receive macOS <br /> settings and macOS
+      update encouragement.
+    </span>
+  ),
+  Pending: (
+    <span>
+      Hosts ordered via Apple Business Manager <br /> (ABM). These will
+      automatically enroll to Fleet <br /> and turn on MDM when they&apos;re
+      unboxed.
+    </span>
+  ),
 };
 
 export const DEFAULT_CREATE_USER_ERRORS = {