From 5985320fa5e1082bc1136cb04275f0020d6f81d2 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Wed, 21 Feb 2024 19:20:36 +0000
Subject: [PATCH] fix: header border issue introduced with ai slug (#4385)

---
 .../src/__tests__/__snapshots__/styles.test.js.snap         | 6 ++++--
 .../src/components/Tearsheet/_tearsheet.scss                | 6 ++++--
 2 files changed, 8 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 02ae796daf..2dab99d3d4 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
@@ -2840,10 +2840,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 {