[Page Headder]Add responsiveness for application header (#8292)

opensearch-project · Sep 25, 2024 · d47d49c · d47d49c
1 parent 9a88bf5
commit d47d49c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git 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
@@ -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
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
@@ -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>