Addresses various component issues and adjusts spacing in component story displays

Author: SirJohn96

source/00-config/vars/colors.css

@@ -21,7 +21,7 @@
   --selection-text: var(--grayscale-white);
 
   --table-background: var(--grayscale-white);
-  --tablebackground-foot: var(--grayscale-gray-1);
+  --table-background-foot: var(--grayscale-gray-1);
   --table-background-head: var(--grayscale-gray-1);
   --table-border: var(--grayscale-gray-5);
 

source/01-global/00-colors/color.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './color.module.css';
 
@@ -128,6 +129,13 @@ const ColorPaletteComponent = ({ brand, grayscale, other }: ColorFamily) => (
 const meta: Meta<typeof ColorPaletteComponent> = {
   title: 'Global/Color Palette',
   component: ColorPaletteComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     brand: {
       table: {

source/01-global/01-typography/fonts.stories.tsx

@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './fonts.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Fonts',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/01-typography/letterspacing.stories.tsx

@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './letterspacing.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Letterspacing',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/01-typography/line-height.stories.tsx

@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './line-height.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Line Height',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/01-typography/text-styles.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import styles from './text-styles.module.css';
 
 const TextStylesComponent = () => {
@@ -23,6 +24,13 @@ const TextStylesComponent = () => {
 const meta: Meta<typeof TextStylesComponent> = {
   title: 'Global/Typography/Text Styles',
   component: TextStylesComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/01-typography/typographic-scale.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
 import typographyVarsAsString from '../../00-config/vars/typography.css?raw';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './typographic-scale.module.css';
 
@@ -26,6 +27,13 @@ const typographyVarsMin = typographyVars.map((e: string) => {
 
 const settings: Meta = {
   title: 'Global/Typography/Typographic Scale',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/02-spacing/space.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 
 const allVars = getCssVariables();
@@ -61,6 +62,13 @@ const SpacingComponent = ({ spacing }: { spacing: SpacingOptions }) => {
 const meta: Meta<typeof SpacingComponent> = {
   title: 'Global/Spacing',
   component: SpacingComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     spacing: {
       table: {

source/01-global/03-box-shadow/shadows.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './shadows.module.css';
 
@@ -42,6 +43,13 @@ function BoxShadowDemo({
 const meta: Meta<typeof BoxShadowDemo> = {
   title: 'Global/Box Shadows',
   component: BoxShadowDemo,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     boxShadow: {
       table: {

source/01-global/04-transitions/duration.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './duration.module.css';
 
@@ -43,6 +44,13 @@ const DurationComponent = ({ duration }: { duration: DurationOptions }) => {
 const meta: Meta<typeof DurationComponent> = {
   title: 'Global/Duration',
   component: DurationComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     duration: {
       table: {