Wrap content for admin runners table

While refactoring the table into a responsive one we did not account for wrapping issues.
This commit wraps some cells and truncates others.

Adds `section-5` class to the responsive tables CSS

app/assets/stylesheets/framework/responsive_tables.scss

@@ -39,7 +39,7 @@
 .table-section {
   white-space: nowrap;
 
-  $section-widths: 10 15 20 25 30 40 50 100;
+  $section-widths: 5 10 15 20 25 30 40 50 100;
   @each $width in $section-widths {
     &.section-#{$width} {
       flex: 0 0 #{$width + '%'};

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

 .gl-responsive-table-row{ id: dom_id(runner) }
-  = render layout: 'runner_table_cell', locals: { label: _('Type') } do
+  .table-section.section-10.section-wrap
+    .table-mobile-header{ role: 'rowheader' }= _('Type')
+    .table-mobile-content
       - if runner.instance_type?
         %span.badge.badge-success shared
       - elsif runner.group_type?
@@ -11,33 +13,49 @@
       - unless runner.active?
         %span.badge.badge-danger paused
 
-  = render layout: 'runner_table_cell', locals: { label: _('Runner token') } do
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+    .table-mobile-content
       = link_to runner.short_sha, admin_runner_path(runner)
 
-  = render layout: 'runner_table_cell', locals: { label: _('Description') } do
+  .table-section.section-15
+    .table-mobile-header{ role: 'rowheader' }= _('Description')
+    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
       = runner.description
 
-  = render layout: 'runner_table_cell', locals: { label: _('Version') } do
+  .table-section.section-15
+    .table-mobile-header{ role: 'rowheader' }= _('Version')
+    .table-mobile-content.str-truncated.has-tooltip{ title: runner.version }
       = runner.version
 
-  = render layout: 'runner_table_cell', locals: { label: _('IP Address') } do
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('IP Address')
+    .table-mobile-content
       = runner.ip_address
 
-  = render layout: 'runner_table_cell', locals: { label: _('Projects') } do
+  .table-section.section-5
+    .table-mobile-header{ role: 'rowheader' }= _('Projects')
+    .table-mobile-content
       - if runner.instance_type? || runner.group_type?
         = _('n/a')
       - else
         = runner.projects.count(:all)
 
-  = render layout: 'runner_table_cell', locals: { label: _('Jobs') } do
+  .table-section.section-5
+    .table-mobile-header{ role: 'rowheader' }= _('Jobs')
+    .table-mobile-content
       = runner.builds.count(:all)
 
-  = render layout: 'runner_table_cell', locals: { label: _('Tags') } do
+  .table-section.section-10.section-wrap
+    .table-mobile-header{ role: 'rowheader' }= _('Tags')
+    .table-mobile-content
       - runner.tag_list.sort.each do |tag|
         %span.badge.badge-primary
           = tag
 
-  = render layout: 'runner_table_cell', locals: { label: _('Last contact') } do
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('Last contact')
+    .table-mobile-content
       - if runner.contacted_at
         = time_ago_with_tooltip runner.contacted_at
       - else

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

-.table-section.section-10
-  .table-mobile-header{ role: 'rowheader' }= label
-  .table-mobile-content
-    = yield

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

@@ -98,8 +98,16 @@
     .runners-content.content-list
       .table-holder
         .gl-responsive-table-row.table-row-header{ role: 'row' }
-          - [_('Type'), _('Runner token'), _('Description'), _('Version'), _('IP Address'), _('Projects'), _('Jobs'), _('Tags'), _('Last contact')].each do |label|
-            .table-section.section-10{ role: 'rowheader' }= label
+          .table-section.section-10{ role: 'rowheader' }= _('Type')
+          .table-section.section-10{ role: 'rowheader' }= _('Runner token')
+          .table-section.section-15{ role: 'rowheader' }= _('Description')
+          .table-section.section-15{ role: 'rowheader' }= _('Version')
+          .table-section.section-10{ role: 'rowheader' }= _('IP Address')
+          .table-section.section-5{ role: 'rowheader' }= _('Projects')
+          .table-section.section-5{ role: 'rowheader' }= _('Jobs')
+          .table-section.section-10{ role: 'rowheader' }= _('Tags')
+          .table-section.section-10{ role: 'rowheader' }= _('Last contact')
+          .table-section.section-10{ role: 'rowheader' }
 
         - @runners.each do |runner|
           = render 'admin/runners/runner', runner: runner

changelogs/unreleased/51549-runners-table.yml

+---
+title: Fixes admin runners table not wrapping content
+merge_request:
+author:
+type: fixed