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 7fdd784bb0..1414999515 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 @@ -2563,11 +2563,17 @@ p.c4p--about-modal__copyright-text:first-child { height: 2.5rem; } .c4p--side-panel .c4p--side-panel__slug-and-close { - position: absolute; + position: fixed; z-index: 10; /* must be higher than title container border bottom */ top: 0; right: 0; display: flex; + /* stylelint-disable-next-line max-nesting-depth */ +} +@media (prefers-reduced-motion) { + .c4p--side-panel .c4p--side-panel__slug-and-close { + position: absolute; + } } .c4p--side-panel .c4p--side-panel__actions-container { position: sticky; diff --git a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss index c8e17ad84d..88540a4750 100644 --- a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss +++ b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss @@ -356,11 +356,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; } .#{$block-class}__slug-and-close { - position: absolute; + position: fixed; z-index: 10; /* must be higher than title container border bottom */ top: 0; right: 0; display: flex; + + /* stylelint-disable-next-line max-nesting-depth */ + @media (prefers-reduced-motion) { + position: absolute; + } } .#{$block-class}__actions-container {