Set min width on forms and tables to prevent content from becoming unreadable

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;

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%;
   }

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%;
   }