3 files changed, 31 insertions, 7 deletions

diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 9b6ff237557..57c73295d1e 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -33,3 +33,20 @@
     font-weight: normal;
   }
 }
+
+.admin-runner-btn-group-cell {
+  min-width: 150px;
+
+  .btn-sm {
+    padding: 4px 9px;
+  }
+
+  .btn-default {
+    color: $gl-text-color-secondary;
+  }
+
+  .fa-pause,
+  .fa-play {
+    font-size: 11px;
+  }
+}
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index d4d166ab7b6..140688b52d3 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -32,13 +32,16 @@
       #{time_ago_in_words(runner.contacted_at)} ago
     - else
       Never
-  %td
-    .pull-right
-      = link_to 'Edit', admin_runner_path(runner), class: 'btn btn-sm'
+  %td.admin-runner-btn-group-cell
+    .pull-right.btn-group
+      = link_to admin_runner_path(runner), class: 'btn btn-sm btn-default has-tooltip', title: 'Edit', ref: 'tooltip', aria: { label: 'Edit' }, data: { placement: 'top', container: 'body'} do
+        = icon('pencil')
        
       - if runner.active?
-        = link_to 'Pause', [:pause, :admin, runner], data: { confirm: "Are you sure?" }, method: :get, class: 'btn btn-danger btn-sm'
+        = link_to [:pause, :admin, runner], method: :get, class: 'btn btn-sm btn-default has-tooltip', title: 'Pause', ref: 'tooltip', aria: { label: 'Pause' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
+          = icon('pause')
       - else
-        = link_to 'Resume', [:resume, :admin, runner], method: :get, class: 'btn btn-success btn-sm'
-      = link_to 'Remove', [:admin, runner], data: { confirm: "Are you sure?" }, method: :delete, class: 'btn btn-danger btn-sm'
-
+        = link_to [:resume, :admin, runner], method: :get, class: 'btn btn-default btn-sm has-tooltip', title: 'Resume', ref: 'tooltip', aria: { label: 'Resume' }, data: { placement: 'top', container: 'body'} do
+          = icon('play')
+      = link_to [:admin, runner], method: :delete, class: 'btn btn-danger btn-sm has-tooltip', title: 'Remove', ref: 'tooltip', aria: { label: 'Remove' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
+        = icon('remove')
diff --git a/changelogs/unreleased/32048-shared-runners-admin-buttons-have-odd-spacing.yml b/changelogs/unreleased/32048-shared-runners-admin-buttons-have-odd-spacing.yml
new file mode 100644
index 00000000000..99e64b9b467
--- /dev/null
+++ b/changelogs/unreleased/32048-shared-runners-admin-buttons-have-odd-spacing.yml
@@ -0,0 +1,4 @@
+---
+title: Fix spacing on runner buttons.
+merge_request: !12535
+author: