From da62958b149bf40554833883c887a45b62edd927 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Fri, 18 Oct 2024 10:45:35 -0700
Subject: [PATCH] fix: Fix padding and responsive behavior of page header
 (#8600) (#8638)

* fix: Fix padding and responsive behavior of page header



* Changeset file for PR #8600 created/updated

---------



(cherry picked from commit db51ee105de99dc57d0dfb5b3c4b47f7cef7e4f3)

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8600.yml                 |  2 ++
 .../header/__snapshots__/header.test.tsx.snap | 28 ++++++++++++----
 src/core/public/chrome/ui/header/header.scss  | 33 ++++++++++++++++++-
 src/core/public/chrome/ui/header/header.tsx   | 18 ++++++----
 4 files changed, 66 insertions(+), 15 deletions(-)
 create mode 100644 changelogs/fragments/8600.yml

diff --git a/changelogs/fragments/8600.yml b/changelogs/fragments/8600.yml
new file mode 100644
index 000000000000..d1e8a5c00480
--- /dev/null
+++ b/changelogs/fragments/8600.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix padding and responsive behavior of page header ([#8600](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8600))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 8cdd0a0f20aa..da288014a02c 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -20461,27 +20461,41 @@ exports[`Header renders page header with application title 1`] = `
           >
             <EuiFlexGroup
               className="secondaryPageHeaderFlexGroup"
-              gutterSize="s"
+              gutterSize="none"
               justifyContent="spaceBetween"
             >
               <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive secondaryPageHeaderFlexGroup"
+                className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive secondaryPageHeaderFlexGroup"
               >
                 <EuiHeaderSection
+                  grow={true}
                   side="left"
+                  style={
+                    Object {
+                      "flexShrink": 1,
+                    }
+                  }
                 >
                   <div
-                    className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+                    className="euiHeaderSection euiHeaderSection--grow euiHeaderSection--left"
+                    style={
+                      Object {
+                        "flexShrink": 1,
+                      }
+                    }
                   >
                     <EuiFlexGroup
+                      className="leftSecondaryPageHeaderFlexGroup"
                       gutterSize="s"
                     >
                       <div
-                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive leftSecondaryPageHeaderFlexGroup"
                       >
-                        <EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
+                        >
                           <div
-                            className="euiFlexItem"
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <EuiHeaderSectionItem
                               border="none"
@@ -20496,7 +20510,7 @@ exports[`Header renders page header with application title 1`] = `
                                   size="l"
                                 >
                                   <h1
-                                    className="euiTitle euiTitle--large newTopNavHeaderTitle"
+                                    className="euiTitle euiTitle--large newTopNavHeaderTitle eui-textBreakWord"
                                   >
                                     testTitle
                                   </h1>
diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
index ed4608a605c5..f1d4e3eda91c 100644
--- a/src/core/public/chrome/ui/header/header.scss
+++ b/src/core/public/chrome/ui/header/header.scss
@@ -70,7 +70,7 @@
 }
 
 .newTopNavHeaderTitle {
-  line-height: 1;
+  line-height: $euiButtonHeightSmall; // match button size so title is centered
   font-size: 2rem;
 }
 
@@ -116,5 +116,36 @@
   .secondaryPageHeaderFlexGroup {
     display: flex;
     flex-direction: column;
+
+    // Override eui responsive spacing for header elements
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    .euiHeaderSection--left,
+    .euiHeaderSection--right {
+      // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+      .euiFlexGroup--responsive > .euiFlexItem {
+        margin: $euiSizeXS 0 !important; // set as !important in eui
+      }
+    }
+  }
+
+  // Add bottom margin to left group to counter-act negative margins from gutters
+  .leftSecondaryPageHeaderFlexGroup {
+    margin-bottom: $euiSizeXS;
+  }
+}
+
+// Make sure there's space betweeen left and right header content on non-mobile screens
+@include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
+  .leftSecondaryPageHeaderFlexGroup {
+    margin-right: $euiSizeM;
+  }
+}
+
+// Make badges/health statuses line-height match buttons so its vertically centered
+.leftSecondaryPageHeaderFlexGroup {
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiBadge,
+  .euiHealth {
+    line-height: $euiButtonHeightSmall !important;
   }
 }
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index ba2dd4282e84..dea3c8e3840d 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -560,23 +560,27 @@ export function Header({
       <EuiHeader className="newTopNavHeader">
         <EuiFlexGroup
           justifyContent="spaceBetween"
-          gutterSize="s"
+          gutterSize="none"
           className="secondaryPageHeaderFlexGroup"
         >
           {/* Left Section */}
-          <EuiHeaderSection side="left">
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem>
+          <EuiHeaderSection side="left" grow={true} style={{ flexShrink: 1 }}>
+            <EuiFlexGroup gutterSize="s" className="leftSecondaryPageHeaderFlexGroup">
+              <EuiFlexItem grow={false}>
                 <EuiHeaderSectionItem border="none" data-test-subj="headerApplicationTitle">
                   <EuiTitle size="l" className="newTopNavHeaderTitle">
-                    {breadcrumbs && <h1>{breadcrumbs[breadcrumbs.length - 1]?.text}</h1>}
+                    {breadcrumbs && (
+                      <h1 className="eui-textBreakWord">
+                        {breadcrumbs[breadcrumbs.length - 1]?.text}
+                      </h1>
+                    )}
                   </EuiTitle>
                 </EuiHeaderSectionItem>
               </EuiFlexItem>
 
-              {badge && <EuiFlexItem>{badge}</EuiFlexItem>}
+              {badge && <EuiFlexItem grow={false}>{badge}</EuiFlexItem>}
 
-              {leftControls && <EuiFlexItem>{leftControls}</EuiFlexItem>}
+              {leftControls && <EuiFlexItem grow={false}>{leftControls}</EuiFlexItem>}
             </EuiFlexGroup>
           </EuiHeaderSection>