Mobile-friendly table on Admin Runners

app/assets/stylesheets/pages/runners.scss

@@ -50,3 +50,10 @@
     font-size: 11px;
   }
 }
+
+@media (max-width: $screen-md-max) {
+  .runners-content {
+    width: 100%;
+    overflow: auto;
+  }
+}

app/views/admin/runners/index.html.haml

@@ -52,22 +52,23 @@
   %br
 
   - if @runners.any?
-    .table-holder
-      %table.table
-        %thead
-          %tr
-            %th Type
-            %th Runner token
-            %th Description
-            %th Version
-            %th Projects
-            %th Jobs
-            %th Tags
-            %th= link_to 'Last contact', admin_runners_path(params.slice(:search).merge(sort: 'contacted_asc'))
-            %th
+    .runners-content
+      .table-holder
+        %table.table
+          %thead
+            %tr
+              %th Type
+              %th Runner token
+              %th Description
+              %th Version
+              %th Projects
+              %th Jobs
+              %th Tags
+              %th Last contact
+              %th
 
-        - @runners.each do |runner|
-          = render "admin/runners/runner", runner: runner
-    = paginate @runners, theme: "gitlab"
+          - @runners.each do |runner|
+            = render "admin/runners/runner", runner: runner
+      = paginate @runners, theme: "gitlab"
   - else
     .nothing-here-block No runners found

changelogs/unreleased/jivl-mobile-friendly-table-runners.yml

+---
+title: Mobile-friendly table on Admin Runners
+merge_request:
+author: Takuya Noguchi
+type: fixed