From bd8337bebbaf7980fa9f48f7066686bb59ae9f0b Mon Sep 17 00:00:00 2001
From: James Nuanez <james@jamesnuanez.com>
Date: Wed, 22 Apr 2020 14:44:46 -0700
Subject: [PATCH] Set min width on forms and tables to prevent content from
 becoming unreadable

---
 src/components/elements/Table.js             | 1 +
 src/components/templates/InternalTemplate.js | 4 ++++
 src/components/templates/SetupTemplate.js    | 6 ++++++
 3 files changed, 11 insertions(+)

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