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 28d61f74f6..672e65ac63 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 @@ -2836,10 +2836,12 @@ p.c4p--about-modal__copyright-text:first-child { padding: 1.5rem 2rem 0; } .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header { - padding-right: 5rem; + padding-inline-end: 5rem; } .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon { - margin-right: 3rem; + /* spacing 11 plus additional space for slug/close */ + /* stylelint-disable-next-line carbon/layout-token-use */ + padding-inline-end: calc(8rem); } .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description { max-width: 80%; diff --git a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss index 755155d199..0e916eaeb1 100644 --- a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss +++ b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss @@ -238,12 +238,14 @@ $motion-duration: $duration-moderate-02; &.#{$block-class}--wide .#{$block-class}__header.#{$block-class}__header--with-close-icon, &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header { - padding-right: $spacing-11; + padding-inline-end: $spacing-11; } &.#{$block-class}--wide.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header--with-close-icon { - margin-right: $spacing-09; + /* spacing 11 plus additional space for slug/close */ + /* stylelint-disable-next-line carbon/layout-token-use */ + padding-inline-end: calc(#{$spacing-11 + $spacing-09}); } &.#{$block-class}--narrow .#{$block-class}__header-description {