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 7500aba660015..58020c6abde06 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 9cb2a53544528..43016c6330f0b 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 @@ -410,6 +410,10 @@ const topNavStyles = { zIndex: euiTheme.levels.mask, top: `var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, ${euiTheme.size.base}))`, 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 c88701ea75e98..916bfc2fbc5d0 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 @@ -719,7 +719,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 598ea7473c429..3f9662ec0d5a3 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');