[Controls] Small visual fixes (#225430)

## 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)

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
+                    <EuiFormLabel className="controlPanel--label">
-                      css={styles.formLabel}
-                      className="eui-textTruncate 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%',

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`
+  filterButton: ({ euiTheme }: UseEuiTheme) =>
-    font-weight: ${euiTheme.font.weight.regular} !important;
+    css({
-    color: ${euiTheme.colors.subduedText} !important;
+      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',