[Dashboard][A11y] Improve usability of dashboard in 400% zoom

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

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) =>

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 (
         <EuiFlexItem
           grow={!shouldShowDatePickerAsBadge()}
-          style={{ minWidth: shouldShowDatePickerAsBadge() ? 'auto' : 320, maxWidth: '100%' }}
+          style={{ minWidth: shouldShowDatePickerAsBadge() ? 'auto' : 300, maxWidth: '100%' }}
         >
           <EuiFlexGroup gutterSize="s" responsive={false}>
             {filterButtonGroup}

src/platform/plugins/shared/unified_search/public/query_string_input/query_string_input.tsx

@@ -210,6 +210,7 @@ export class QueryStringInput extends PureComponent<QueryStringInputProps, State
     this.props.appName
   );
   private componentIsUnmounting = false;
+  private hasScrollListener = false;
 
   /**
    * If any element within the container is currently focused
@@ -652,6 +653,11 @@ export class QueryStringInput extends PureComponent<QueryStringInputProps, State
     }
   };
 
+  private handleResize = () => {
+    this.handleAutoHeight();
+    this.handleBlurOnScroll();
+  };
+
   private onClickSuggestion = (suggestion: QuerySuggestion, index: number) => {
     if (!this.inputRef) {
       return;
@@ -684,7 +690,9 @@ export class QueryStringInput extends PureComponent<QueryStringInputProps, State
     this.fetchIndexPatterns();
     this.handleAutoHeight();
 
-    window.addEventListener('resize', this.handleAutoHeight);
+    window.addEventListener('resize', this.handleResize);
+
+    this.handleBlurOnScroll();
   }
 
   public componentDidUpdate(prevProps: QueryStringInputProps) {
@@ -722,7 +730,8 @@ export class QueryStringInput extends PureComponent<QueryStringInputProps, State
     if (this.abortController) this.abortController.abort();
     if (this.updateSuggestions.cancel) this.updateSuggestions.cancel();
     this.componentIsUnmounting = true;
-    window.removeEventListener('resize', this.handleAutoHeight);
+    window.removeEventListener('resize', this.handleResize);
+    if (this.hasScrollListener) window.removeEventListener('scroll', this.onOutsideClick);
   }
 
   handleAutoHeight = onRaf(() => {
@@ -732,6 +741,21 @@ export class QueryStringInput extends PureComponent<QueryStringInputProps, State
     }
   });
 
+  handleBlurOnScroll = onRaf(() => {
+    // 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');