From 26d56b5060e4d35ee31d1cf65dc1af9df5cc50fa Mon Sep 17 00:00:00 2001
From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Date: Thu, 26 Jun 2025 17:17:42 +0200
Subject: [PATCH] [Controls] Small visual fixes  (#225430)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fixes [#221140](https://github.com/elastic/kibana/issues/221140)
Fixes [#223579](https://github.com/elastic/kibana/issues/223579)

---

### 🏷️ Long labels no longer truncated

Label truncation was introduced sometime between versions 8.14 and 8.18:

**8.14 (working):**

![8.14](https://github.com/user-attachments/assets/0ea30306-9a27-4343-86a8-a64acbe86117)

**8.18 (broken):**

![8.18](https://github.com/user-attachments/assets/39c4b393-1180-45e7-9595-228bfbe75f46)

✅ **After the fix:**
![After
fix](https://github.com/user-attachments/assets/2b9bfbe5-8201-4997-ae76-fd4e43b6ceec)

---

### 🎛️ [Controls] Options list hover background fix

The original hover style comes from EUI. Removing it entirely made the
interaction feel unclear,
so I’ve reintroduced a lighter background to subtly indicate the hover
state:

**9.0 (broken):**
<img width="648" alt="Screenshot 2025-06-26 at 14 05 51"
src="https://github.com/user-attachments/assets/2eff832d-47bd-4664-84d3-62c88d013a89"
/>


✅ **After the fix:**
![Hover
state](https://github.com/user-attachments/assets/11abde74-3bc6-4416-b422-ec5f1fdeed9a)
---
 .../components/control_panel.tsx              | 20 +++++++------------
 .../components/options_list_control.tsx       | 12 +++++++----
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx b/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx
index 209eff17b9f1..4da13c486652 100644
--- a/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx
+++ b/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx
@@ -162,12 +162,9 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
                 ) : isTwoLine ? null : (
                   <EuiToolTip
                     content={panelTitle || defaultPanelTitle}
-                    anchorProps={{ css: styles.tooltipAnchor }}
+                    anchorProps={{ css: styles.tooltipAnchor, className: 'eui-textTruncate' }}
                   >
-                    <EuiFormLabel
-                      css={styles.formLabel}
-                      className="eui-textTruncate controlPanel--label"
-                    >
+                    <EuiFormLabel className="controlPanel--label">
                       {panelTitle || defaultPanelTitle}
                     </EuiFormLabel>
                   </EuiToolTip>
@@ -213,14 +210,6 @@ const controlPanelStyles = {
   containerHidden: css({
     display: 'none', // Don't unmount, just hide
   }),
-  formLabel: css({
-    padding: '0 !important',
-    height: '100%',
-    maxWidth: '100%',
-    overflow: 'hidden !important',
-    textOverflow: 'ellipsis !important',
-    whiteSpace: `nowrap !important` as 'nowrap',
-  }),
   formControl: ({ euiTheme }: UseEuiTheme) =>
     css({
       '.euiFormControlLayout__prepend': {
@@ -277,6 +266,11 @@ const controlPanelStyles = {
           right: `calc(-${euiTheme.size.xs} - 1px)`,
         },
       },
+      '.controlPanel--label': {
+        padding: '0 !important',
+        height: '100%',
+        maxWidth: '100%',
+      },
     }),
   tooltipAnchor: css({
     height: '100%',
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
index 5e0bc7c65634..e4f7b4270820 100644
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
+++ b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
@@ -55,10 +55,14 @@ const optionListControlStyles = {
     font-weight: ${euiTheme.font.weight.medium};
   `,
   invalidSelectionsToken: css({ verticalAlign: 'text-bottom' }),
-  filterButton: ({ euiTheme }: UseEuiTheme) => css`
-    font-weight: ${euiTheme.font.weight.regular} !important;
-    color: ${euiTheme.colors.subduedText} !important;
-  `,
+  filterButton: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      fontWeight: `${euiTheme.font.weight.regular} !important` as 'normal',
+      color: `${euiTheme.colors.subduedText} !important`,
+      '&:hover::before': {
+        background: `${euiTheme.colors.backgroundBaseSubdued} !important`,
+      },
+    }),
   filterButtonText: css({
     flexGrow: 1,
     textAlign: 'left',