[Discover] fix: set smaller max width for mobile devices (#199798)

elastic · Nov 14, 2024 · fbd06a3 · fbd06a3
1 parent a21743c
commit fbd06a3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.styles.ts b/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 }),
+      }),
     },
   };
 };
diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx b/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