From 13ae98602f1979bab413cefe57e3685510adc3d3 Mon Sep 17 00:00:00 2001
From: Ania Kowalska <63072419+akowalska622@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:01:16 +0100
Subject: [PATCH] [Discover] fix: responsive data view picker (#199617)

## Summary

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

`ChangeDataView` had two problems on smaller screens:

1. The `Data view` label was wrapped across two rows, causing the parent
container to expand and misalign with the picker.
2. The picker container was overflowing, and the text was not truncated.

![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)

Setting `min-width: 0` on two parent containers solved the problem:
<img width="442" alt="Screenshot 2024-11-11 at 11 52 09"
src="https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1">

![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)



### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [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#_add_your_labels)
- [ ] This will appear in the **Release Notes** and follow the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
---
 .../public/dataview_picker/change_dataview.tsx            | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx
index ade754004b8ef..d89621d598679 100644
--- a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx
+++ b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx
@@ -43,6 +43,10 @@ const mapAdHocDataView = (adHocDataView: DataView): DataViewListItemEnhanced =>
   };
 };
 
+const shrinkableContainerCss = css`
+  min-width: 0;
+`;
+
 export function ChangeDataView({
   isMissingCurrent,
   currentDataViewId,
@@ -238,7 +242,7 @@ export function ChangeDataView({
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <>
-        <EuiFlexItem grow={true}>
+        <EuiFlexItem grow={true} css={shrinkableContainerCss}>
           <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
             <EuiFlexItem
               grow={false}
@@ -254,7 +258,7 @@ export function ChangeDataView({
                 defaultMessage: 'Data view',
               })}
             </EuiFlexItem>
-            <EuiFlexItem grow={true}>
+            <EuiFlexItem grow={true} css={shrinkableContainerCss}>
               <EuiPopover
                 panelClassName="changeDataViewPopover"
                 button={createTrigger()}