fix: chromatic

.storybook/preview.ts

@@ -1,8 +1,13 @@
 import * as tokens from '@sbb-esta/lyne-design-tokens';
+import type { StoryContext } from '@storybook/types';
+import type { Decorator } from '@storybook/web-components';
+import isChromatic from 'chromatic/isChromatic';
+import { html } from 'lit';
 
-import '../src/components/core/styles/global.scss';
 import { withBackgroundDecorator } from '../src/storybook/testing/with-background-decorator.js';
 
+import '../src/components/core/styles/global.scss';
+
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
 
@@ -65,4 +70,10 @@ export const parameters = {
   },
 };
 
-export const decorators = [withBackgroundDecorator];
+export const decorators: Decorator[] = [
+  (story, context: StoryContext) =>
+    isChromatic() && context.parameters.layout !== 'fullscreen'
+      ? html`<div style="padding: 2rem"></div>`
+      : story(),
+  withBackgroundDecorator,
+];

src/components/autocomplete/autocomplete.stories.ts

@@ -504,7 +504,10 @@ export const MixedSingleOptionWithOptionGroupNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [withActions as Decorator],
+  decorators: [
+    (story) => (isChromatic() ? html` <div style="min-height: 100vh">${story()}</div>` : story()),
+    withActions as Decorator,
+  ],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {

src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts

@@ -131,7 +131,7 @@ export const LongContent: StoryObj = {
     'icon-name': 'house-small',
     text: 'This label name is so long that it needs ellipsis to fit.',
   },
-  decorators: [(story) => html` <div style="max-width: 200px;">${story()}</div> `],
+  decorators: [(story) => html`<div style="max-width: 200px;">${story()}</div>`],
 };
 
 export const NoLink: StoryObj = {