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 + } } }