From 786c0ced44dd9cef274d794117edea8f256442f4 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Wed, 22 Oct 2025 13:33:32 -0400
Subject: [PATCH] Fleet UI: Fix CSS on edit icon modal (#34531)

---
 .../EditIconModal/EditIconModal.tsx                  |  4 +++-
 .../EditIconModal/_styles.scss                       | 12 ++++++++++++
 frontend/styles/var/mixins.scss                      |  5 +++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx
index c214fb1919..e01b586451 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx
@@ -466,7 +466,9 @@ const EditIconModal = ({
               uploadedAt={iconUploadedAt}
             />
           )}
-          <TooltipTruncatedText value={previewInfo.name} />
+          <div className={`${baseClass}__self-service-preview-name`}>
+            <TooltipTruncatedText value={previewInfo.name} />
+          </div>
         </div>
       </Card>
       <div
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/_styles.scss b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/_styles.scss
index 6e0d538e4b..3901297c4a 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/_styles.scss
@@ -3,6 +3,10 @@
     font-size: $medium;
   }
 
+  .modal__content {
+    @include vertical-modal-layout;
+  }
+
   &__preview-card {
     max-height: 203px;
     overflow: hidden;
@@ -68,6 +72,14 @@
     }
   }
 
+  // Required for tooltip truncating long software names
+  &__self-service-preview-name {
+    max-width: 180px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &__mask-overlay {
     position: relative;
     width: 550px;
diff --git a/frontend/styles/var/mixins.scss b/frontend/styles/var/mixins.scss
index c66144aad0..084854c5f4 100644
--- a/frontend/styles/var/mixins.scss
+++ b/frontend/styles/var/mixins.scss
@@ -271,6 +271,11 @@ $max-width: 2560px;
   @include flex-column-24px-gap;
 }
 
+// Separate in case there's any modal level styling we need
+@mixin vertical-modal-layout {
+  @include flex-column-24px-gap;
+}
+
 // Separate in case there's any tab level styling we need
 @mixin vertical-page-tab-panel-layout {
   @include flex-column-24px-gap;