From 12af094a8c193f1c42d6a052a262d5be8df2a3a1 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 29 Aug 2023 14:47:26 -0400
Subject: [PATCH] Fleet UI: [tiny released styling bug] Fix alignment on long
 label names (#13568)

---
 changes/13521-label-alignment                        |  1 +
 .../components/LabelFilterSelect/_styles.scss        | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 changes/13521-label-alignment

diff --git a/changes/13521-label-alignment b/changes/13521-label-alignment
new file mode 100644
index 0000000000..addfefdd87
--- /dev/null
+++ b/changes/13521-label-alignment
@@ -0,0 +1 @@
+- Bug fix: Fix alignment on long label names on host details label filter dropdown
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
index 0cdae3bd21..9fbc3357ba 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
@@ -60,6 +60,10 @@
     font-size: $small;
   }
 
+  .label-filter-select__single-value {
+    max-width: 84%; // Must override default styling of .css-qc6sy-singleValue
+  }
+
   .label-filter-select__placeholder {
     width: 75px; // Truncates text for smaller filter width
     overflow: hidden;
@@ -142,8 +146,12 @@
   }
 }
 
-@media (min-width: 1100px) {
+@media (min-width: 1150px) {
   .label-filter-select {
-    width: 180px;
+    width: 220px;
+
+    &__single-value {
+      max-width: 135px !important; // Must override default styling of .css-qc6sy-singleValue
+    }
   }
 }