From 5b7016d144401b7734afc0a913903caf008a9313 Mon Sep 17 00:00:00 2001
From: Johan Sosa <sosa.johan@gmail.com>
Date: Fri, 22 Dec 2023 14:14:58 +0100
Subject: [PATCH] feat(TotalLayout): Breakpoint based width

---
 .../TotalLayoutFooterContainer.styles.js                   | 7 ++++---
 .../TotalLayoutStepContainer.styles.js                     | 3 +++
 .../VerticalStepperContainer.styles.js                     | 3 +++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js
index b59aa8046..7dd82fe6c 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js
@@ -4,15 +4,16 @@ const TotalLayoutFooterContainerStyles = createStyles(
   (theme, { showFooterBorder, leftOffset, fixed }) => ({
     root: {},
     footer: {
-      minWidth: 928,
-      maxWidth: 928,
-      width: '100%',
+      width: 928,
       marginLeft: leftOffset,
       backgroundColor: 'white',
       borderTop: showFooterBorder && `1px solid ${theme.other.divider.background.color.default}`,
       zIndex: 1,
       position: fixed ? 'fixed' : 'relative',
       bottom: 0,
+      '@media (min-width: 1920px)': {
+        width: 1200,
+      },
     },
   }),
 );
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
index a381ec37a..fa3b2b64b 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
@@ -6,6 +6,9 @@ const TotalLayoutStepContainerStyles = createStyles((theme, { hasFooter, clean }
     padding: '30px 0 0 0 ',
     width: 928,
     height: '100%',
+    '@media (min-width: 1920px)': {
+      width: 1200,
+    },
   },
   formContainer: {
     backgroundColor: !clean && 'white',
diff --git a/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.styles.js b/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.styles.js
index 234fe810d..3d33b4908 100644
--- a/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.styles.js
+++ b/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.styles.js
@@ -21,6 +21,9 @@ const VerticalStepperContainerStyles = createStyles((theme) => {
     },
     content: {
       width: 928,
+      '@media (min-width: 1920px)': {
+        width: 1200,
+      },
     },
   };
 });