fix(components): fix render context issues in the post-collapsible …

…component (#4478)
swisspost · Jan 21, 2025 · 61ef1b4 · 61ef1b4
1 parent b72d300
commit 61ef1b4
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 9 deletions.
diff --git a/.changeset/angry-eagles-appear.md b/.changeset/angry-eagles-appear.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Positioned the `post-collapsible` host relative so every not static positioned element within uses it as its base render context and therefore gets clipped as it should.
diff --git a/.changeset/cold-bags-chew.md b/.changeset/cold-bags-chew.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Positioned `ul.list-bullet > li::before` elements statically, so they can't cause render context issues anymore.
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.scss b/packages/components/src/components/post-collapsible/post-collapsible.scss
@@ -1,4 +1,5 @@
 :host {
   display: block;
+  position: relative;
   overflow: hidden;
 }
diff --git a/packages/styles/src/mixins/_list.scss b/packages/styles/src/mixins/_list.scss
@@ -24,7 +24,7 @@
       display: block;
       content: '';
       box-sizing: content-box;
-      position: absolute;
+      float: inline-start;
       margin-block-start: calc(
         (#{tokens.get('body-line-height', elements.$post-body)} * 0.5em) -
           (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * 0.5)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml