From 90d07edb8c07df831e2b192c07abfadafe2c8b28 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Fri, 23 Feb 2024 18:36:14 +0000 Subject: [PATCH] fix: side panel slug and close position (#4426) --- .../src/__tests__/__snapshots__/styles.test.js.snap | 8 +++++++- .../src/components/SidePanel/_side-panel.scss | 7 ++++++- 2 files changed, 13 insertions(+), 2 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 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 {