fix: Flex container should be column by default

Author: franky47

src/components/containers.test.tsx

@@ -36,6 +36,7 @@ describe('Containers', () => {
     expect(element.tagName).toEqual('DIV')
     const style = getComputedStyle(element)
     expect(style.display).toEqual('flex')
+    expect(style.flexDirection).toEqual('column')
     expect(style.maxWidth).toEqual('36rem')
     expect(style.marginLeft).toEqual('auto')
     expect(style.marginRight).toEqual('auto')
@@ -51,6 +52,7 @@ describe('Containers', () => {
     expect(element.tagName).toEqual('DIV')
     const style = getComputedStyle(element)
     expect(style.display).toEqual('flex')
+    expect(style.flexDirection).toEqual('column')
     expect(style.maxWidth).toEqual('48rem')
     expect(style.marginLeft).toEqual('auto')
     expect(style.marginRight).toEqual('auto')
@@ -64,6 +66,7 @@ describe('Containers', () => {
     expect(element.tagName).toEqual('DIV')
     const style = getComputedStyle(element)
     expect(style.display).toEqual('flex')
+    expect(style.flexDirection).toEqual('column')
     expect(style.maxWidth).toEqual('36rem')
     expect(style.marginLeft).toEqual('auto')
     expect(style.marginRight).toEqual('auto')
@@ -79,6 +82,7 @@ describe('Containers', () => {
     expect(element.tagName).toEqual('DIV')
     const style = getComputedStyle(element)
     expect(style.display).toEqual('flex')
+    expect(style.flexDirection).toEqual('column')
     expect(style.maxWidth).toEqual('48rem')
     expect(style.marginLeft).toEqual('auto')
     expect(style.marginRight).toEqual('auto')

src/components/containers.tsx

@@ -33,7 +33,15 @@ export const FlexContainer: React.FC<FlexContainerProps> = ({
   wide = false,
   ...props
 }) => {
-  return <Flex maxW={wide ? '3xl' : 'xl'} mx="auto" px={2} {...props} />
+  return (
+    <Flex
+      direction="column"
+      maxW={wide ? '3xl' : 'xl'}
+      mx="auto"
+      px={2}
+      {...props}
+    />
+  )
 }
 
 // --