[CHUX-524] Align the full screen content container (#1968)

* [CHUX-524] add styles needed

* [CHUX-524] remove p max width in story to make container width more noticeable

* [CHUX-524] fix previous stories

* [CHUX-524] update visual snapshots

* 2.8.7

* [CHUX-524] move main container width var to the component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.6",
+  "version": "2.8.7",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-container/ec-container.story.ts

@@ -37,7 +37,7 @@ const Template: StoryFn<typeof EcContainer> = args => ({
         <div class="tw-bg-key-2 tw-text-gray-8 tw-min-h-screen">Navigation panel</div>
       </template>
       <template #content>
-        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen">Main content panel</div>
+        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen tw-w-screen">Main content panel</div>
       </template>
     </ec-container>
   `,
@@ -161,8 +161,8 @@ export const withNavigation: ContainerWithNavigationStory = ({
       </template>
       <template #content>
         <ec-main-container>
-          <p class="tw-mb-16">Lorem ipsum dolor sit amet, consectetur <a href="//google.co.uk">adipiscing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Proin nibh nisl condimentum id venenatis a. Pellentesque habitant morbi tristique senectus et netus et. Sapien eget mi proin sed. Dui faucibus in ornare quam. Ut ornare lectus sit amet est. Sed enim ut sem viverra aliquet eget sit. Dui sapien eget mi proin. Nunc aliquet bibendum enim facilisis gravida.</p>
-          <p>Sem integer vitae justo eget magna. Neque convallis a cras semper auctor. Velit euismod in pellentesque massa placerat duis ultricies. Tincidunt dui ut ornare lectus sit amet est. Nunc sed id semper risus in. Senectus et netus et malesuada fames ac turpis egestas maecenas. Turpis nunc eget lorem dolor sed viverra. Leo integer malesuada nunc vel risus commodo. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Tempus egestas sed sed risus pretium quam vulputate dignissim.</p>
+          <p class="tw-mb-16 tw-min-w-full">Lorem ipsum dolor sit amet, consectetur <a href="//google.co.uk">adipiscing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Proin nibh nisl condimentum id venenatis a. Pellentesque habitant morbi tristique senectus et netus et. Sapien eget mi proin sed. Dui faucibus in ornare quam. Ut ornare lectus sit amet est. Sed enim ut sem viverra aliquet eget sit. Dui sapien eget mi proin. Nunc aliquet bibendum enim facilisis gravida.</p>
+          <p class="tw-min-w-full">Sem integer vitae justo eget magna. Neque convallis a cras semper auctor. Velit euismod in pellentesque massa placerat duis ultricies. Tincidunt dui ut ornare lectus sit amet est. Nunc sed id semper risus in. Senectus et netus et malesuada fames ac turpis egestas maecenas. Turpis nunc eget lorem dolor sed viverra. Leo integer malesuada nunc vel risus commodo. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Tempus egestas sed sed risus pretium quam vulputate dignissim.</p>
         </ec-main-container>
       </template>
     </ec-container>
@@ -222,7 +222,7 @@ export const withResponsiveLayout: StoryFn<typeof EcContainer> = args => ({
         <div class="tw-bg-key-2 tw-text-gray-8 tw-min-h-48">Navigation panel</div>
       </template>
       <template #content>
-        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen">Main content panel</div>
+        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen tw-w-screen">Main content panel</div>
       </template>
     </ec-container>
   `,

src/components/ec-container/ec-container.vue

@@ -51,7 +51,7 @@ defineProps<ContainerProps>();
   }
 
   &__content {
-    @apply tw-flex-1;
+    @apply tw-flex tw-flex-1 tw-justify-center;
     @apply tw-min-w-0;
   }
 }

src/components/ec-main-container/ec-main-container.vue

@@ -65,9 +65,16 @@ function hasSlot(slotName: string) {
 </script>
 
 <style>
+:root,
+:host {
+  --ec-main-container-max-width: 1200px;
+}
+
 .ec-main-container {
   @apply tw-p-24;
-  @apply tw-min-h-full;
+  @apply tw-min-h-full tw-w-full;
+
+  max-width: var(--ec-main-container-max-width);
 
   &__title {
     @apply tw-h2;