From d71cdc43bb33a30ecf752c635313ed288f763533 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Wed, 10 Jul 2024 16:03:17 +0200
Subject: [PATCH] fix(sbb-container, sbb-tab-group): avoid reserving invisible
 space

---
 .../container/container.visual.spec.ts        | 29 ++++++++++++++++---
 src/elements/core/styles/mixins/helpers.scss  |  1 +
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts
index 8de8704e37..792bbfc50b 100644
--- a/src/elements/container/container/container.visual.spec.ts
+++ b/src/elements/container/container/container.visual.spec.ts
@@ -25,14 +25,16 @@ describe(`sbb-container`, () => {
     <sbb-secondary-button style="margin-block-end: 3rem;">See more</sbb-secondary-button>
   `;
 
+  const wrapperStyles = { backgroundColor: 'var(--sbb-color-silver)', padding: '0' };
+
   describeViewports({ viewportHeight: 600 }, () => {
     for (const color of colorCases) {
       it(
         `color=${color}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
-            html` <sbb-container color=${color}> ${containerContent()} </sbb-container> `,
-            { backgroundColor: 'var(--sbb-color-silver)', padding: '0' },
+            html`<sbb-container color=${color}>${containerContent()}</sbb-container>`,
+            wrapperStyles,
           );
         }),
       );
@@ -42,8 +44,27 @@ describe(`sbb-container`, () => {
       `expanded`,
       visualDiffDefault.with(async (setup) => {
         await setup.withFixture(
-          html` <sbb-container expanded> ${containerContent()} </sbb-container> `,
-          { backgroundColor: 'var(--sbb-color-silver)', padding: '0' },
+          html`<sbb-container expanded>${containerContent()}</sbb-container>`,
+          wrapperStyles,
+        );
+      }),
+    );
+  });
+
+  describeViewports({ viewports: ['medium'] }, () => {
+    it(
+      `nested`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-container color="white">
+              ${containerContent()}
+              <div style="background-color: var(--sbb-color-milk);">
+                <sbb-container color="transparent">${containerContent()}</sbb-container>
+              </div>
+            </sbb-container>
+          `,
+          wrapperStyles,
         );
       }),
     );
diff --git a/src/elements/core/styles/mixins/helpers.scss b/src/elements/core/styles/mixins/helpers.scss
index ea8049f779..2bc9d87679 100644
--- a/src/elements/core/styles/mixins/helpers.scss
+++ b/src/elements/core/styles/mixins/helpers.scss
@@ -41,6 +41,7 @@
     display: block;
     visibility: hidden;
     height: 0;
+    overflow: hidden;
   }
 }