Environment detail view

app/assets/stylesheets/framework/responsive-tables.scss

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

app/assets/stylesheets/pages/environments.scss

@@ -143,7 +143,8 @@
         }
 
         > .btn-group,
-        .external-url {
+        .external-url,
+        .btn {
           flex: 1;
           flex-basis: 28px;
         }
@@ -154,6 +155,10 @@
       }
     }
   }
+
+  .branch-commit {
+    max-width: 100%;
+  }
 }
 
 .folder-row {

app/views/projects/deployments/_actions.haml

@@ -6,7 +6,7 @@
         %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
           = custom_icon('icon_play')
           = icon('caret-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu
           - actions.each do |action|
             - next unless can?(current_user, :update_build, action)
             %li

app/views/projects/deployments/_commit.html.haml

@@ -1,14 +1,14 @@
 .branch-commit
   - if deployment.ref
-    .icon-container
+    %span.icon-container
       = deployment.tag? ? icon('tag') : icon('code-fork')
     = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
   .icon-container.commit-icon
     = custom_icon("icon_commit")
   = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
 
-  %p.commit-title
-    %span
+  %p.commit-title.flex-truncate-parent
+    %span.flex-truncate-child
       - if commit_title = deployment.commit_title
         = author_avatar(deployment.commit, size: 20)
         = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message"

app/views/projects/deployments/_deployment.html.haml

@@ -1,11 +1,11 @@
-%tr.deployment
-  %td
+.gl-responsive-table-row.deployment
+  .table-section.section-10{ role: 'gridcell' }
     %strong ##{deployment.iid}
 
-  %td
+  .table-section.section-40{ role: 'gridcell' }
     = render 'projects/deployments/commit', deployment: deployment
 
-  %td.build-column
+  .table-section.section-15.build-column{ role: 'gridcell' }
     - if deployment.deployable
       = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do
         #{deployment.deployable.name} (##{deployment.deployable.id})
@@ -13,10 +13,10 @@
         by
         = user_avatar(user: deployment.user, size: 20)
 
-  %td
+  .table-section.section-15{ role: 'gridcell' }
     #{time_ago_with_tooltip(deployment.created_at)}
 
-  %td.hidden-xs
-    .pull-right.btn-group
+  .table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' }
+    .btn-group.environment-action-buttons
       = render 'projects/deployments/actions', deployment: deployment
       = render 'projects/deployments/rollback', deployment: deployment

app/views/projects/environments/show.html.haml

@@ -3,7 +3,7 @@
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
-  .top-area.adjust
+  .row.top-area.adjust
     .col-md-7
       %h3.page-title= @environment.name
     .col-md-5
@@ -28,14 +28,12 @@
         = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
     - else
       .table-holder
-        %table.table.ci-table.environments
-          %thead
-            %tr
-              %th ID
-              %th Commit
-              %th Job
-              %th Created
-              %th.hidden-xs
+        .ci-table.environments
+          .gl-responsive-table-row.table-row-header{ role: 'row' }
+            .table-section.section-10{ role: 'rollheader' } ID
+            .table-section.section-40{ role: 'rollheader' } Commit
+            .table-section.section-15{ role: 'rollheader' } Job
+            .table-section.section-15{ role: 'rollheader' } Created
 
           = render @deployments
 

changelogs/unreleased/environment-detail-view.yml

@@ -0,0 +1,4 @@
+---
+title: Make environment tables responsive
+merge_request:
+author: