From d47d49c981b3d40e278092c1bce7bc42dbc5e160 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Tue, 24 Sep 2024 17:03:50 -0700
Subject: [PATCH] [Page Headder]Add responsiveness for application header
 (#8292)

---
 src/core/public/chrome/ui/header/header.scss  |  2 +-
 .../ui/filter_bar/_global_filter_group.scss   | 17 ++++++++++++--
 .../__snapshots__/top_nav_menu.test.tsx.snap  |  2 ++
 .../public/top_nav_menu/top_nav_menu.tsx      | 23 +++++++++++++++----
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
index c57a01831643..ed4608a605c5 100644
--- a/src/core/public/chrome/ui/header/header.scss
+++ b/src/core/public/chrome/ui/header/header.scss
@@ -112,7 +112,7 @@
 }
 
 /* Control flex items to wrap when the viewport is less than the medium size */
-@media (max-width: 768px) {
+@include euiBreakpoint("s", "xs") {
   .secondaryPageHeaderFlexGroup {
     display: flex;
     flex-direction: column;
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
index 3a7fe796def4..2f347b6e2996 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -12,8 +12,21 @@
   }
 }
 
-.globalDatePicker {
-  text-align: right;
+@include euiBreakpoint("m", "l", "xl", "xxl") {
+  .globalDatePicker {
+    text-align: right;
+  }
+}
+
+@include euiBreakpoint("s", "xs") {
+  .headerAppActionMenu {
+    .osdTopNavMenuScreenTitle,
+    .osdTopNavMenu,
+    .osdTopNavSearchBar,
+    .globalDatePicker {
+      margin-bottom: 0 !important;
+    }
+  }
 }
 
 .headerAppActionMenu .globalQueryBar,
diff --git a/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap b/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap
index 1825c19d2d3d..68f21dfb5b53 100644
--- a/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap
+++ b/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`TopNavMenu mounts the data source menu as well as top nav menu 1`] = `
     className="osdTopNavMenu"
     data-test-subj="top-nav"
     gutterSize="xs"
+    popoverBreakpoints="none"
   >
     <TopNavMenuItem
       disableButton={false}
@@ -74,6 +75,7 @@ exports[`TopNavMenu mounts the data source menu if showDataSourceMenu is true 1`
     className="osdTopNavMenu"
     data-test-subj="top-nav"
     gutterSize="xs"
+    popoverBreakpoints="none"
   >
     <Component
       componentConfig={
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
index 7eb32c2a4a6b..b2662c29a28c 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -137,7 +137,12 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
     const menuClassName = classNames(className, { osdTopNavMenuSpread: spreadSections });
 
     return (
-      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={menuClassName}>
+      <EuiHeaderLinks
+        data-test-subj="top-nav"
+        gutterSize="xs"
+        className={menuClassName}
+        popoverBreakpoints={'none'}
+      >
         {renderItems()}
         {renderDataSourceMenu()}
       </EuiHeaderLinks>
@@ -179,8 +184,12 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                       <EuiText size="s">{screenTitle}</EuiText>
                     </EuiFlexItem>
-                    <EuiFlexItem grow={false}>{renderMenu(menuClassName)}</EuiFlexItem>
-                    <EuiFlexItem>{renderSearchBar({ isFilterBarPortable: true })}</EuiFlexItem>
+                    <EuiFlexItem grow={false} className="osdTopNavMenu">
+                      {renderMenu(menuClassName)}
+                    </EuiFlexItem>
+                    <EuiFlexItem className="osdTopNavSearchBar">
+                      {renderSearchBar({ isFilterBarPortable: true })}
+                    </EuiFlexItem>
                   </EuiFlexGroup>
                 </MountPointPortal>
               </>
@@ -194,7 +203,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                   <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                     <EuiText size="s">{screenTitle}</EuiText>
                   </EuiFlexItem>
-                  <EuiFlexItem>{renderMenu(menuClassName, true)}</EuiFlexItem>
+                  <EuiFlexItem className="osdTopNavMenu">
+                    {renderMenu(menuClassName, true)}
+                  </EuiFlexItem>
                 </EuiFlexGroup>
               </MountPointPortal>
             ) : (
@@ -212,7 +223,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                       <EuiText size="s">{screenTitle}</EuiText>
                     </EuiFlexItem>
-                    <EuiFlexItem grow={false}>{renderMenu(menuClassName)}</EuiFlexItem>
+                    <EuiFlexItem grow={false} className="osdTopNavMenu">
+                      {renderMenu(menuClassName)}
+                    </EuiFlexItem>
                     <EuiFlexItem className="globalDatePicker">
                       <div ref={datePickerRef} />
                     </EuiFlexItem>