[Discover] fix: responsive data view picker (#199617)

akowalska622 · akowalska622 · commit 2c724f983262 · 2024-11-12T12:06:07.000Z
## Summary Closes #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) (cherry picked from commit 13ae986)
diff --git 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()}
