From b9d14a9fd0f3c94d8267755147a87fe3b77fa2c3 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Thu, 4 Feb 2021 19:52:58 -0500
Subject: [PATCH] fix(ui): Limit max width of forms & lists (#845)

---
 src/components/Common/List/index.tsx | 12 +++++++-----
 src/styles/globals.css               |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Common/List/index.tsx b/src/components/Common/List/index.tsx
index 1f723c652..689fba5cb 100644
--- a/src/components/Common/List/index.tsx
+++ b/src/components/Common/List/index.tsx
@@ -7,11 +7,13 @@ interface ListItemProps {
 
 const ListItem: React.FC<ListItemProps> = ({ title, children }) => {
   return (
-    <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-      <dt className="block text-sm font-medium text-gray-400">{title}</dt>
-      <dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
-        <span className="flex-grow">{children}</span>
-      </dd>
+    <div>
+      <div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt className="block text-sm font-medium text-gray-400">{title}</dt>
+        <dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
+          <span className="flex-grow">{children}</span>
+        </dd>
+      </div>
     </div>
   );
 };
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7dcaae94d..f6ebfefbb 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -50,7 +50,7 @@ body {
 }
 
 .form-row {
-  @apply mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start;
+  @apply max-w-6xl mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start;
 }
 
 .form-input {