diff --git a/src/components/elements/Table.js b/src/components/elements/Table.js index ec69419..6728fff 100644 --- a/src/components/elements/Table.js +++ b/src/components/elements/Table.js @@ -5,6 +5,7 @@ const Table = styled.table` border-collapse: collapse; white-space: nowrap; width: 100%; + min-width: 38rem; & > thead { background: #F7F7F7; diff --git a/src/components/templates/InternalTemplate.js b/src/components/templates/InternalTemplate.js index 77bd536..a14683f 100644 --- a/src/components/templates/InternalTemplate.js +++ b/src/components/templates/InternalTemplate.js @@ -89,6 +89,10 @@ const ContentContainer = styled.div` ${props => props.type === 'form' && 'max-width: 61rem;' } + min-width: ${props => props.type === 'form' + ? '58rem' + : '38rem' + }; @media (max-width: 34rem) { width: 100%; } diff --git a/src/components/templates/SetupTemplate.js b/src/components/templates/SetupTemplate.js index 8113a20..70e14f1 100644 --- a/src/components/templates/SetupTemplate.js +++ b/src/components/templates/SetupTemplate.js @@ -34,6 +34,12 @@ const ContentContainer = styled.div` border-radius: 0.5rem; box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1), 0px 0px 0.25rem rgba(0, 0, 0, 0.1); + ${props => props.wide && ` + min-width: 58rem; + `} + @media (max-width: 58rem) { + align-self: flex-start; + } @media (max-width: 34rem) { width: 100%; }