[8.x] [Discover] fix: responsive data view picker (#199617) (#199769)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Discover] fix: responsive data view picker
(#199617)](#199617)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Ania
Kowalska","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-12T12:01:16Z","message":"[Discover]
fix: responsive data view picker (#199617)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/199434\r\n\r\n`ChangeDataView`
had two problems on smaller screens:\r\n\r\n1. The `Data view` label was
wrapped across two rows, causing the parent\r\ncontainer to expand and
misalign with the picker.\r\n2. The picker container was overflowing,
and the text was not
truncated.\r\n\r\n![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)\r\n\r\nSetting
`min-width: 0` on two parent containers solved the problem:\r\n<img
width=\"442\" alt=\"Screenshot 2024-11-11 at 11 52
09\"\r\nsrc=\"https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1\">\r\n\r\n![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n-
[ ] This will appear in the **Release Notes** and follow
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"13ae98602f1979bab413cefe57e3685510adc3d3","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:skip","v9.0.0","Team:DataDiscovery","Feature:Unified
search","backport:prev-minor"],"title":"[Discover] fix: responsive data
view
picker","number":199617,"url":"https://github.com/elastic/kibana/pull/199617","mergeCommit":{"message":"[Discover]
fix: responsive data view picker (#199617)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/199434\r\n\r\n`ChangeDataView`
had two problems on smaller screens:\r\n\r\n1. The `Data view` label was
wrapped across two rows, causing the parent\r\ncontainer to expand and
misalign with the picker.\r\n2. The picker container was overflowing,
and the text was not
truncated.\r\n\r\n![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)\r\n\r\nSetting
`min-width: 0` on two parent containers solved the problem:\r\n<img
width=\"442\" alt=\"Screenshot 2024-11-11 at 11 52
09\"\r\nsrc=\"https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1\">\r\n\r\n![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n-
[ ] This will appear in the **Release Notes** and follow
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"13ae98602f1979bab413cefe57e3685510adc3d3"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199617","number":199617,"mergeCommit":{"message":"[Discover]
fix: responsive data view picker (#199617)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/199434\r\n\r\n`ChangeDataView`
had two problems on smaller screens:\r\n\r\n1. The `Data view` label was
wrapped across two rows, causing the parent\r\ncontainer to expand and
misalign with the picker.\r\n2. The picker container was overflowing,
and the text was not
truncated.\r\n\r\n![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)\r\n\r\nSetting
`min-width: 0` on two parent containers solved the problem:\r\n<img
width=\"442\" alt=\"Screenshot 2024-11-11 at 11 52
09\"\r\nsrc=\"https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1\">\r\n\r\n![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n-
[ ] This will appear in the **Release Notes** and follow
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"13ae98602f1979bab413cefe57e3685510adc3d3"}}]}]
BACKPORT-->

Co-authored-by: Ania Kowalska <[email protected]>
Co-authored-by: Julia Rechkunova <[email protected]>

Author: 3 people

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()}