Fleet UI: Fix CSS on edit icon modal (#34531)

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

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;

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;