From b727a50c13938b7a1fe028dfe7f7f6b6f2b0ef33 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 30 Oct 2018 13:03:44 +0000
Subject: [PATCH 1/2] =?UTF-8?q?Don=E2=80=99t=20have=20copy=20API=20key=20b?=
 =?UTF-8?q?utton=20jump=20around?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s annoying that this button moves after you click on it. It’s
happening because the API key is wrapping onto multiple lines.

This commit fixes the height of the container so that it doesn’t reflow
when it has less content in it.

Uses a bit of flexbox to vertically centre the text.
---
 app/assets/javascripts/apiKey.js               |  2 ++
 app/assets/stylesheets/components/api-key.scss | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/apiKey.js b/app/assets/javascripts/apiKey.js
index 2bbfa174c..4b7889d97 100644
--- a/app/assets/javascripts/apiKey.js
+++ b/app/assets/javascripts/apiKey.js
@@ -34,6 +34,8 @@
             thing = $component.data('thing');
 
       $component
+        .addClass('api-key')
+        .css('min-height', $component.height())
         .html(states.keyVisible(key, thing))
         .attr('aria-live', 'polite')
         .on(
diff --git a/app/assets/stylesheets/components/api-key.scss b/app/assets/stylesheets/components/api-key.scss
index 6099524b5..a144a0c89 100644
--- a/app/assets/stylesheets/components/api-key.scss
+++ b/app/assets/stylesheets/components/api-key.scss
@@ -1,5 +1,9 @@
 .api-key {
 
+  position: relative;
+  padding-bottom: 38px;  // height of button
+  display: flex;
+
   &-name {
     @include bold-19;
     margin-bottom: 5px;
@@ -8,12 +12,21 @@
   &-key {
     font-family: monospace;
     display: block;
-    margin-bottom: 10px;
+    padding: 0 0 10px 0;
+    margin: auto 0;
   }
 
   &-button-show,
   &-button-copy {
+
     @include button($grey-3);
+    position: absolute;
+    bottom: 2px;
+
+    &:active {
+      top: auto;
+    }
+
   }
 
 }

From 3caaf74c4aed14cc363f0a01c8fa82ac874cccfe Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 30 Oct 2018 13:09:09 +0000
Subject: [PATCH 2/2] Split paragraph into two

There was an awkward line break in this text, and the line length was
too long because there was no grid on the page.

Splitting it into two paragraphs makes it:
- read nicer
- avoids any awkward line breaks
---
 app/templates/views/api/keys/show.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/templates/views/api/keys/show.html b/app/templates/views/api/keys/show.html
index 40f9579a1..e3d1ab3ed 100644
--- a/app/templates/views/api/keys/show.html
+++ b/app/templates/views/api/keys/show.html
@@ -14,8 +14,10 @@
     </h1>
 
     <p>
-      Copy your key to somewhere safe. You won’t be able to see it again
-      once you leave this page.
+      Copy your key to somewhere safe.
+    </p>
+    <p>
+      You won’t be able to see it again once you leave this page.
     </p>
 
     <div class="bottom-gutter-2">