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 index 9727c8f6e1593..21ece7f82e88d 100644 --- 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 index d89621d598679..06ed558ce7a01 100644 --- 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(); 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