fix(sbb-container, sbb-tab-group): avoid reserving invisible space

sbb-design-systems · Jul 10, 2024 · d71cdc4 · d71cdc4
1 parent 46e4771
commit d71cdc4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git 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
@@ -41,6 +41,7 @@
     display: block;
     visibility: hidden;
     height: 0;
+    overflow: hidden;
   }
 }