fix(sbb-tab-group): avoid unwanted margin block spaces (#2628)

src/components/container/container/container.scss

@@ -16,6 +16,8 @@
 }
 
 .sbb-container {
+  @include sbb.ignore-children-margin;
+
   background-color: var(--sbb-container-background-color);
 
   // In order to support nested sbb-containers (e.g. if used in an overlay), we need to explicitly set background color to transparent.
@@ -25,15 +27,6 @@
     background-color: transparent;
   }
 
-  // Placing content before and after the container stops the margin of inner elements from overflowing
-  &::after,
-  &::before {
-    content: '\a0';
-    display: block;
-    visibility: hidden;
-    height: 0;
-  }
-
   :host(:not([expanded])) & {
     @include sbb.page-spacing;
   }

src/components/core/styles/mixins/helpers.scss

@@ -33,6 +33,17 @@
   }
 }
 
+// Placing content before and after the container stops the margin of inner elements from overflowing
+@mixin ignore-children-margin {
+  &::after,
+  &::before {
+    content: '\a0';
+    display: block;
+    visibility: hidden;
+    height: 0;
+  }
+}
+
 @mixin invisible-container-overlay {
   position: absolute;
   opacity: 0;

src/components/tabs/tab-group/tab-group.scss

@@ -18,6 +18,8 @@
 }
 
 .tab-content {
+  @include sbb.ignore-children-margin;
+
   margin-block-start: var(--sbb-spacing-responsive-m);
   transition: height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing);
 
@@ -26,6 +28,10 @@
     opacity: 0;
     height: 0;
     overflow: hidden;
+
+    // If e.g. a block link with an absolute positioned element is slotted, there would be an visible space
+    // below the tab content. Setting position:relative removes the unwanted whitespace.
+    position: relative;
   }
 
   ::slotted(*[active]) {

src/components/tabs/tab-group/tab-group.stories.ts

@@ -16,8 +16,9 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 import readme from './readme.md?raw';
 import { SbbTabGroupElement } from './tab-group.js';
 
-import '../tab-title.js';
+import '../../link.js';
 import '../../title.js';
+import '../tab-title.js';
 
 const firstTabTitle = (label: string, args: Args): TemplateResult => html`
   <sbb-tab-title ${sbbSpread(args)}>${label}</sbb-tab-title>
@@ -41,6 +42,7 @@ const tabPanelTwo = (): TemplateResult => html`
     Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
     elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
     urna neque viverra justo nec.
+    <sbb-block-link target="_blank" href="https://www.sbb.ch">Visit sbb.ch</sbb-block-link>
   </section>
 `;