Refactor Container component styles to use object syntax for improved…

… readability and maintainability
jasonrundell · Jan 16, 2025 · 367bb76 · 367bb76
1 parent d554643
commit 367bb76
Showing 1 changed file with 6 additions and 7 deletions.
diff --git a/src/stories/atoms/Container/Container.tsx b/src/stories/atoms/Container/Container.tsx
@@ -7,14 +7,13 @@ interface ContainerProps {
   children: React.ReactNode
 }
 
-const StyledContainer = styled('div')<ContainerProps>`
-  margin: 0 auto;
-  padding: 0 2rem;
-
-  @media (min-width: ${Tokens.sizes.breakpoints.medium}rem) {
-    max-width: ${Tokens.sizes.breakpoints.medium}rem;
+const StyledContainer = styled('div')<ContainerProps>({
+  margin: '0 auto',
+  padding: `0 ${Tokens.sizes.padding.large}rem`,
+  '@media (min-width: 48rem)': {
+    maxWidth: `${Tokens.sizes.breakpoints.medium}rem`
   }
-`
+})
 
 const Container = ({ children, ...props }: ContainerProps) => {
   return <StyledContainer {...props}>{children}</StyledContainer>