Fix personal access token clipboard button style

3 files changed, 10 insertions, 8 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index ac745019319..b199f9876d3 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -210,13 +210,8 @@
 }
 
 .created-personal-access-token-container {
-  #created-personal-access-token {
-    width: 90%;
-    display: inline;
-  }
-
   .btn-clipboard {
-    margin-left: 5px;
+    border: 1px solid $border-color;
   }
 }
 
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 78848542810..b96251cd982 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -19,8 +19,10 @@
         %h5.prepend-top-0
           Your New Personal Access Token
         .form-group
-          = text_field_tag 'created-personal-access-token', @new_personal_access_token, readonly: true, class: "form-control js-select-on-focus", 'aria-describedby' => "created-personal-access-token-help-block"
-          = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left")
+          .input-group
+            = text_field_tag 'created-personal-access-token', @new_personal_access_token, readonly: true, class: "form-control js-select-on-focus", 'aria-describedby' => "created-personal-access-token-help-block"
+            %span.input-group-btn
+              = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left", class: "btn-default btn-clipboard")
           %span#created-personal-access-token-help-block.help-block.text-danger Make sure you save it - you won't be able to access it again.
 
       %hr
diff --git a/changelogs/unreleased/43976-fix-access-token-clipboard-button-style.yml b/changelogs/unreleased/43976-fix-access-token-clipboard-button-style.yml
new file mode 100644
index 00000000000..b341d5dfa7f
--- /dev/null
+++ b/changelogs/unreleased/43976-fix-access-token-clipboard-button-style.yml
@@ -0,0 +1,5 @@
+---
+title: Fix personal access token clipboard button style
+merge_request: 17978
+author: Fabian Schneider
+type: fixed