fix: Fix padding and responsive behavior of page header (opensearch-p…

…roject#8600) * fix: Fix padding and responsive behavior of page header Signed-off-by: Viraj Sanghvi <[email protected]> * Changeset file for PR opensearch-project#8600 created/updated --------- Signed-off-by: Viraj Sanghvi <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
sejli · Oct 21, 2024 · 9a371cc · 9a371cc
1 parent ced8763
commit 9a371cc
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 15 deletions.
diff --git a/changelogs/fragments/8600.yml 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))
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
diff --git 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
@@ -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>