feat(TotalLayout): Breakpoint based width

leemonade · Dec 22, 2023 · 5b7016d · 5b7016d
1 parent 9dc9a0b
commit 5b7016d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/...ts/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js b/...ts/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/...onents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/...onents/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
@@ -21,6 +21,9 @@ const VerticalStepperContainerStyles = createStyles((theme) => {
     },
     content: {
       width: 928,
+      '@media (min-width: 1920px)': {
+        width: 1200,
+      },
     },
   };
 });