From 0072e424fc1f25fbf58be67f7d4d792643f26c30 Mon Sep 17 00:00:00 2001
From: Nandan Devadula <47176249+devadula-nandan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:47:27 +0530
Subject: [PATCH] fix(pageHeader): menu button overflow issue on small screens
 (#6502)

---
 .../__snapshots__/styles.test.js.snap         | 20 +++++++++++++++----
 .../components/PageHeader/_page-header.scss   |  5 +++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
index 75c14a5b05..8b9b2f99b3 100644
--- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
+++ b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -254,6 +254,14 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-grid-column-hang: 0.96875rem;
 }
 
+.cds--css-grid--start {
+  margin-inline-start: 0;
+}
+
+.cds--css-grid--end {
+  margin-inline-end: 0;
+}
+
 .cds--subgrid {
   display: grid;
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
@@ -3402,7 +3410,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__head .c4p--datagrid__head-select-all.c4p--datagrid__checkbox-cell.c4p--datagrid__checkbox-cell-sticky-left {
   position: sticky;
-  z-index: 1;
+  z-index: 10;
   left: 0;
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
@@ -3773,7 +3781,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
   position: sticky;
-  z-index: 1;
+  z-index: 10;
   left: 0;
   background-color: var(--cds-layer-accent-01, #e0e0e0);
 }
@@ -4370,7 +4378,7 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--datagrid__left-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
-  z-index: 1;
+  z-index: 10;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle);
 }
@@ -4399,7 +4407,7 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
   position: sticky;
-  z-index: 1;
+  z-index: 10;
   left: 0;
 }
 
@@ -9530,6 +9538,10 @@ button.c4p--add-select__global-filter-toggle--open {
   z-index: 7999;
 }
 
+.c4p--page-header__button-set-menu-options > button.cds--menu-button__trigger {
+  min-inline-size: 0;
+}
+
 .c4p--card__productive {
   display: flex;
   flex-direction: column;
diff --git a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss
index b5866c4ba7..cb12a5cdf2 100644
--- a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss
+++ b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss
@@ -667,3 +667,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 .#{$block-class}__button-set-menu-options.#{$carbon-prefix}--overflow-menu-options {
   z-index: $z-index-header-minus;
 }
+
+.#{$block-class}__button-set-menu-options
+  > button.#{$carbon-prefix}--menu-button__trigger {
+  min-inline-size: 0;
+}