From 6f4845e4cd7eaa2ffb7a8d6ee7eb8c5912388ebe Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 9 Jan 2026 11:57:17 -0800
Subject: [PATCH] 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
---
 .../OSSettings/cards/Certificates/Certificates.tsx            | 3 ++-
 .../OSSettings/cards/Certificates/_styles.scss                | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/Certificates.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/Certificates.tsx
index 6737851bb6..0d0ae7dfd5 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/Certificates.tsx
+++ b/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
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/_styles.scss b/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/_styles.scss
index 46ca312da3..a7ea57c46e 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/_styles.scss
+++ b/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;
+  }
 }