fix(ui): Limit max width of forms & lists (#845)

sct · Feb 5, 2021 · b9d14a9 · b9d14a9
1 parent 026795d
commit b9d14a9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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 {