UI - Fix handling of really long cert names (#38116)

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #38107 


https://github.com/user-attachments/assets/86f509bf-da0a-45bf-ba16-3ea2b19800e1


- [x] QA'd all new/changed functionality manually

frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/Certificates.tsx

@@ -21,6 +21,7 @@ import PageDescription from "components/PageDescription";
 import PremiumFeatureMessage from "components/PremiumFeatureMessage";
 import SectionHeader from "components/SectionHeader";
 import GenericMsgWithNavButton from "components/GenericMsgWithNavButton";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 
 import {
   DEFAULT_USE_QUERY_OPTIONS,
@@ -160,7 +161,7 @@ const Certificates = ({
             return (
               <ListItem
                 graphic="file-certificate"
-                title={name}
+                title={<TooltipTruncatedText value={name} />}
                 details={details}
                 actions={
                   <GitOpsModeTooltipWrapper

frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/_styles.scss

@@ -6,4 +6,8 @@
   &__mdm-disabled-message {
     border: 1px solid $ui-fleet-black-10;
   }
+  .list-item__title {
+    max-width: px-to-rem(900);
+    width: 36vw;
+  }
 }