Get copy to clipboard button aligned within snippet header

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -240,7 +240,7 @@ export default {
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
-      <small v-if="isModeChanged" ref="fileMode">
+      <small v-if="isModeChanged" ref="fileMode" class="mr-1">
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 

app/assets/stylesheets/framework/buttons.scss

@@ -339,6 +339,8 @@
 
   svg {
     top: auto;
+    width: 16px;
+    height: 16px;
   }
 }
 

app/assets/stylesheets/framework/files.scss

@@ -366,10 +366,6 @@ span.idiff {
     color: $gl-text-color;
   }
 
-  small {
-    margin: 0 10px 0 0;
-  }
-
   .file-actions .btn {
     padding: 0 10px;
     font-size: 13px;

app/assets/stylesheets/framework/snippets.scss

@@ -22,6 +22,10 @@
 
 .snippet-file-content {
   border-radius: 3px;
+
+  .file-title-flex-parent .btn-clipboard {
+    line-height: 28px;
+  }
 }
 
 .snippet-header {

app/helpers/blob_helper.rb

@@ -188,7 +188,7 @@ module BlobHelper
   end
 
   def copy_file_path_button(file_path)
-    clipboard_button(text: file_path, gfm: "`#{file_path}`", class: 'btn-clipboard btn-transparent prepend-left-5', title: 'Copy file path to clipboard')
+    clipboard_button(text: file_path, gfm: "`#{file_path}`", class: 'btn-clipboard btn-transparent', title: 'Copy file path to clipboard')
   end
 
   def copy_blob_source_button(blob)

app/views/projects/blob/_header_content.html.haml

@@ -6,7 +6,7 @@
 
   = copy_file_path_button(blob.path)
 
-  %small
+  %small.mr-1
     = number_to_human_size(blob.raw_size)
 
   - if blob.stored_externally? && blob.external_storage == :lfs

changelogs/unreleased/61323-snippet-copy-icon-button-is-misaligned.yml

+---
+title: Resolve Snippet icon button is misaligned
+merge_request: 28522
+author: Marcel van Remmerden
+type: other