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; + } + } } 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 @@
- 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. +
++ You won’t be able to see it again once you leave this page.