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] =?UTF-8?q?Don=E2=80=99t=20have=20copy=20API=20key=20butto?=
 =?UTF-8?q?n=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;
+    }
+
   }
 
 }