diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx index 061501c4c5236..9c00b82e943de 100644 --- a/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx +++ b/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx @@ -275,6 +275,11 @@ const dashboardGridStyles = { position: 'absolute', width: '100%', }, + + [`@media (max-width: ${euiTheme.breakpoint.m}px)`]: { + // on smaller screens, the maximized panel should take the full height of the screen minus the sticky top nav + minHeight: 'calc(100vh - var(--kbn-application--sticky-headers-offset, 0px))', + }, }, // LAYOUT MODES // Adjust borders/etc... for non-spaced out and expanded panels diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx index ff281d56439c1..3205f9e83768f 100644 --- a/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx +++ b/src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx @@ -409,6 +409,10 @@ const topNavStyles = { zIndex: euiTheme.levels.mask, top: `var(--kbn-application--sticky-headers-offset, 0px)`, background: euiTheme.colors.backgroundBasePlain, + + [`@media (max-width: ${euiTheme.breakpoint.m}px)`]: { + position: 'unset', // on smaller screens, the top nav should not be sticky + }, }, }), updateIcon: ({ euiTheme }: UseEuiTheme) => diff --git a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx index 8c956bc7985e4..cb27a88091582 100644 --- a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx +++ b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx @@ -753,7 +753,7 @@ export const QueryBarTopRow = React.memo( return ( {filterButtonGroup} diff --git a/src/platform/plugins/shared/unified_search/public/query_string_input/query_string_input.tsx b/src/platform/plugins/shared/unified_search/public/query_string_input/query_string_input.tsx index 341c6708907ab..4642a5a348d02 100644 --- a/src/platform/plugins/shared/unified_search/public/query_string_input/query_string_input.tsx +++ b/src/platform/plugins/shared/unified_search/public/query_string_input/query_string_input.tsx @@ -210,6 +210,7 @@ export class QueryStringInput extends PureComponent { + this.handleAutoHeight(); + this.handleBlurOnScroll(); + }; + private onClickSuggestion = (suggestion: QuerySuggestion, index: number) => { if (!this.inputRef) { return; @@ -684,7 +690,9 @@ export class QueryStringInput extends PureComponent { @@ -732,6 +741,21 @@ export class QueryStringInput extends PureComponent { + // for small screens, unified search bar is no longer sticky, + // so we need to blur the input when it scrolls out of view + // TODO: replace screen width value with euiTheme breakpoint once this component is converted to a functional component + const isSmallScreen = window.innerWidth < 768; + + if (isSmallScreen && !this.hasScrollListener) { + window.addEventListener('scroll', this.onOutsideClick); + this.hasScrollListener = true; + } else if (!isSmallScreen && this.hasScrollListener) { + window.removeEventListener('scroll', this.onOutsideClick); + this.hasScrollListener = false; + } + }); + handleRemoveHeight = onRaf(() => { if (this.inputRef !== null) { this.inputRef.style.removeProperty('height');