Merge pull request #2428 from alphagov/api-key-page-neatness

Make API key page handle multiple lines of text better

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(

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;
+    }
+
   }
 
 }

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
+      Copy your key to somewhere safe.
-      once you leave this page.
+    </p>
+    <p>
+      You won’t be able to see it again once you leave this page.
     </p>
 
     <div class="bottom-gutter-2">