From e6f3f2e965e5c38fc84b1b5d83a5c3f4f0dabc99 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 15 Aug 2023 16:26:37 -0400
Subject: [PATCH] Fleet UI: [4.36 unreleased bug] Dropdown width styling fix
 (#13340)

---
 .../hosts/details/cards/Software/_styles.scss  | 18 +++---------------
 .../software/ManageSoftwarePage/_styles.scss   | 17 +++--------------
 2 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/frontend/pages/hosts/details/cards/Software/_styles.scss b/frontend/pages/hosts/details/cards/Software/_styles.scss
index 8b2cca7f22..e1dc55e7c4 100644
--- a/frontend/pages/hosts/details/cards/Software/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Software/_styles.scss
@@ -6,8 +6,6 @@
     .controls {
       // vulnerable software dropdown filter
       .Select {
-        width: 225px;
-
         .Select-menu-outer {
           width: 364px;
           max-height: 310px;
@@ -19,20 +17,10 @@
         .Select-value {
           padding-left: $pad-medium;
           padding-right: $pad-medium;
-
-          &::before {
-            display: inline-block;
-            position: absolute;
-            padding: 5px 0 0 0; // centers spin
-            content: url(../assets/images/icon-filter-black-16x16@2x.png);
-            transform: scale(0.5);
-            height: 26px;
-            left: 2px;
-          }
         }
-        .Select-value-label {
-          padding-left: $pad-large;
-          font-size: $small !important;
+
+        .dropdown__custom-value-label {
+          width: 155px; // Override 105px for longer text options
         }
       }
     }
diff --git a/frontend/pages/software/ManageSoftwarePage/_styles.scss b/frontend/pages/software/ManageSoftwarePage/_styles.scss
index e3923fd98c..372af5a942 100644
--- a/frontend/pages/software/ManageSoftwarePage/_styles.scss
+++ b/frontend/pages/software/ManageSoftwarePage/_styles.scss
@@ -73,9 +73,8 @@
             margin: 0;
           }
           .manage-software-page__vuln_dropdown {
-            width: 225px;
             .Select-menu-outer {
-              width: 364px;
+              width: 250px;
               max-height: 310px;
               .Select-menu {
                 max-height: none;
@@ -84,19 +83,9 @@
             .Select-value {
               padding-left: $pad-medium;
               padding-right: $pad-medium;
-              &::before {
-                display: inline-block;
-                position: absolute;
-                padding: 5px 0 0 0; // centers spin
-                content: url(../assets/images/icon-filter-black-16x16@2x.png);
-                transform: scale(0.5);
-                height: 26px;
-                left: 2px;
-              }
             }
-            .Select-value-label {
-              padding-left: $pad-large;
-              font-size: $small !important;
+            .dropdown__custom-value-label {
+              width: 155px; // Override 105px for longer text options
             }
           }
         }