From 0a2ccf5da73f24bf1a27a105a1b3208e7adc639f Mon Sep 17 00:00:00 2001
From: Hannah Mudge <Heenawter@users.noreply.github.com>
Date: Tue, 30 Jan 2024 08:28:31 -0700
Subject: [PATCH] [Controls] Fix text alignment of options list control
 selections (#175073)

Closes https://github.com/elastic/kibana/issues/174971

## Summary

This PR fixes the alignment issue for the options list control that
happened due to the most recent EUI update.

| Before | After |
|--------|--------|
| ![Jan-17-2024
16-03-07](https://github.com/elastic/kibana/assets/8698078/d40993fc-ed16-4ca6-86fa-aa156e4ef4d8)
| ![Jan-17-2024
16-04-00](https://github.com/elastic/kibana/assets/8698078/1746cecb-8c93-46a9-b381-1ef07b1d9999)
|

### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
---
 .../public/options_list/components/options_list.scss         | 5 ++---
 .../public/options_list/components/options_list_control.tsx  | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss
index e0c749441ff6af..4dca925e952ce5 100644
--- a/src/plugins/controls/public/options_list/components/options_list.scss
+++ b/src/plugins/controls/public/options_list/components/options_list.scss
@@ -31,10 +31,9 @@
       color: $euiColorDanger;
     }
 
-    .euiFilterButton__text-hasNotification {
+    .optionsList--selectionText {
       flex-grow: 1;
-      justify-content: space-between;
-      width: 0;
+      text-align: left;
     }
   }
 
diff --git a/src/plugins/controls/public/options_list/components/options_list_control.tsx b/src/plugins/controls/public/options_list/components/options_list_control.tsx
index 11683266ad2f00..5a358b29c6196d 100644
--- a/src/plugins/controls/public/options_list/components/options_list_control.tsx
+++ b/src/plugins/controls/public/options_list/components/options_list_control.tsx
@@ -152,6 +152,7 @@ export const OptionsListControl = ({
       isSelected={isPopoverOpen}
       numActiveFilters={validSelectionsCount}
       hasActiveFilters={Boolean(validSelectionsCount)}
+      textProps={{ className: 'optionsList--selectionText' }}
     >
       {hasSelections || existsSelected
         ? selectionDisplayNode