docs: encapsulate MultipleStoryElementsWrapper into a global style de…

…corator, add custom padding

packages/core/.storybook/preview.tsx

@@ -45,6 +45,7 @@ const preview: Preview = {
     controls: {
       sort: "alpha"
     },
+    layout: "fullscreen",
     docs: {
       container: ({ children, context }: { children: any; context: any }) => (
         <DocsContainer context={context}>

packages/core/src/storybook/decorators/withGlobalStyle/withGlobalStyle.module.scss

@@ -0,0 +1,3 @@
+.storyWrapper {
+  padding: var(--spacing-xl) var(--spacing-large);
+}

packages/core/src/storybook/decorators/withGlobalStyle/withGlobalStyle.tsx

@@ -0,0 +1,14 @@
+import { MultipleStoryElementsWrapper } from "vibe-storybook-components";
+import cx from "classnames";
+import styles from "./withGlobalStyle.module.scss";
+import { StoryFn } from "@storybook/react";
+
+const WithGlobalStyle = (Story: StoryFn, { className }: { className: string }) => {
+  return (
+    <MultipleStoryElementsWrapper className={cx(styles.storyWrapper, className)}>
+      <Story />
+    </MultipleStoryElementsWrapper>
+  );
+};
+
+export default WithGlobalStyle;