fix(pageHeader): menu button overflow issue on small screens (carbon-…

…design-system#6502)
lee-chase · Nov 27, 2024 · 0072e42 · 0072e42
1 parent 1e8818f
commit 0072e42
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -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
@@ -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;
+}