Fix personal access token clipboard button style

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

app/views/profiles/personal_access_tokens/index.html.haml

@@ -19,8 +19,10 @@
         %h5.prepend-top-0
           Your New Personal Access Token
         .form-group
+          .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"
-          = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left")
+            %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

changelogs/unreleased/43976-fix-access-token-clipboard-button-style.yml

+---
+title: Fix personal access token clipboard button style
+merge_request: 17978
+author: Fabian Schneider
+type: fixed