From ed87d4cd26dc2c45b6ca641f7c92fde00528c463 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Tue, 14 May 2019 19:50:54 +0200
Subject: [PATCH] Aligns AccountView to top of page

---
 client/modules/User/components/APIKeyForm.jsx | 2 +-
 client/modules/User/pages/AccountView.jsx     | 2 +-
 client/styles/components/_form-container.scss | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index 17ea1542..bffd0ffc 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -44,7 +44,7 @@ function TokenMetadataList({ tokens, onRemove }) {
           );
 
           const newKeyValue = v.token && (
-            <tr key={v.id}>
+            <tr key={`${v.id}-newKey`}>
               <td colSpan="4">
                 <NewTokenDisplay token={v.token} />
               </td>
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index bac59dbd..9cf18eb8 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -38,7 +38,7 @@ class AccountView extends React.Component {
 
   render() {
     return (
-      <section className="account form-container">
+      <section className="form-container form-container--align-top">
         <Helmet>
           <title>p5.js Web Editor | Account</title>
         </Helmet>
diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss
index 669edf8e..743aad21 100644
--- a/client/styles/components/_form-container.scss
+++ b/client/styles/components/_form-container.scss
@@ -6,6 +6,10 @@
   align-items: center;
 }
 
+.form-container--align-top {
+  height: unset;
+}
+
 .form-container__header {
 	width: 100%;
 	padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;