[8.x] [Discover] fix: set smaller max width for mobile devices (#199798…

…) (#200202)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Discover] fix: set smaller max width for mobile devices
(#199798)](#199798)

<!--- 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-14T14:55:16Z","message":"[Discover]
fix: set smaller max width for mobile devices
(#199798)","sha":"fbd06a347f2d6b4c312848723ecdf490bfbf8feb","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: set smaller max
width for mobile
devices","number":199798,"url":"https://github.com/elastic/kibana/pull/199798","mergeCommit":{"message":"[Discover]
fix: set smaller max width for mobile devices
(#199798)","sha":"fbd06a347f2d6b4c312848723ecdf490bfbf8feb"}},"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/199798","number":199798,"mergeCommit":{"message":"[Discover]
fix: set smaller max width for mobile devices
(#199798)","sha":"fbd06a347f2d6b4c312848723ecdf490bfbf8feb"}}]}]
BACKPORT-->

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

src/plugins/unified_search/public/dataview_picker/change_dataview.styles.ts

@@ -12,15 +12,18 @@ import { calculateWidthFromEntries } from '@kbn/calculate-width-from-char-count'
 import { DataViewListItemEnhanced } from './dataview_list';
 
 const MIN_WIDTH = 300;
+const MAX_MOBILE_WIDTH = 350;
 
 export const changeDataViewStyles = ({
   fullWidth,
   dataViewsList,
   theme,
+  isMobile,
 }: {
   fullWidth?: boolean;
   dataViewsList: DataViewListItemEnhanced[];
   theme: EuiThemeComputed;
+  isMobile: boolean;
 }) => {
   return {
     trigger: {
@@ -30,7 +33,10 @@ export const changeDataViewStyles = ({
       borderBottomLeftRadius: 0,
     },
     popoverContent: {
-      width: calculateWidthFromEntries(dataViewsList, ['name', 'id'], { minWidth: MIN_WIDTH }),
+      width: calculateWidthFromEntries(dataViewsList, ['name', 'id'], {
+        minWidth: MIN_WIDTH,
+        ...(isMobile && { maxWidth: MAX_MOBILE_WIDTH }),
+      }),
     },
   };
 };

src/plugins/unified_search/public/dataview_picker/change_dataview.tsx

@@ -17,6 +17,7 @@ import {
   EuiContextMenuItem,
   useEuiTheme,
   useGeneratedHtmlId,
+  useIsWithinBreakpoints,
   EuiIcon,
   EuiText,
   EuiContextMenuPanelProps,
@@ -68,10 +69,13 @@ export function ChangeDataView({
   const kibana = useKibana<IUnifiedSearchPluginServices>();
   const { application, data, dataViews, dataViewEditor } = kibana.services;
 
+  const isMobile = useIsWithinBreakpoints(['xs']);
+
   const styles = changeDataViewStyles({
     fullWidth: trigger.fullWidth,
     dataViewsList,
     theme: euiTheme,
+    isMobile,
   });
 
   // Create a reusable id to ensure search input is the first focused item in the popover even though it's not the first item