Fleet UI: Clean up TabNav and TargetChipSelector components (#26256)

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -13,10 +13,11 @@ import RevealButton from "components/buttons/RevealButton";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 import TooltipWrapper from "components/TooltipWrapper";
-import TabsWrapper from "components/TabsWrapper";
+import TabNav from "components/TabNav";
 import InfoBanner from "components/InfoBanner/InfoBanner";
 import CustomLink from "components/CustomLink/CustomLink";
 import Radio from "components/forms/fields/Radio";
+import TabText from "components/TabText";
 
 import { isValidPemCertificate } from "../../../pages/hosts/ManageHostsPage/helpers";
 import IosIpadosPanel from "./IosIpadosPanel";
@@ -573,7 +574,7 @@ const PlatformWrapper = ({
 
   return (
     <div className={baseClass}>
-      <TabsWrapper>
+      <TabNav>
         <Tabs
           onSelect={(index) => setSelectedTabIndex(index)}
           selectedIndex={selectedTabIndex}
@@ -584,7 +585,7 @@ const PlatformWrapper = ({
               // so we add a hidden pseudo element with the same text string
               return (
                 <Tab key={navItem.name} data-text={navItem.name}>
-                  {navItem.name}
+                  <TabText>{navItem.name}</TabText>
                 </Tab>
               );
             })}
@@ -601,7 +602,7 @@ const PlatformWrapper = ({
             );
           })}
         </Tabs>
-      </TabsWrapper>
+      </TabNav>
       <div className="modal-cta-wrap">
         <Button onClick={onCancel} variant="brand">
           Done

frontend/components/AddHostsModal/PlatformWrapper/_styles.scss

@@ -3,7 +3,7 @@
 .platform-wrapper {
   padding: 0; // different to pad sticky subnav properly
 
-  .component__tabs-wrapper {
+  .tab-nav {
     // negate problematic sticky positioning
     position: initial;
     .react-tabs {