Adds responsive behaviour equal to the one in Pipelines and Builds table

5 files changed, 54 insertions, 47 deletions

diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 1981c15e75c..3f19e920166 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -1,3 +1,9 @@
+.environments-container,
+.deployments-container {
+  width: 100%;
+  overflow: auto;
+}
+
 .environments {
   .deployment-column {
     .avatar {
@@ -47,7 +53,6 @@
 }
 
 .table.builds.environments {
-  min-width: 500px;
 
   .icon-container {
     width: 20px;
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index 2ea3b477bb7..ca0005abd0c 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -16,5 +16,5 @@
   %td
     #{time_ago_with_tooltip(deployment.created_at)}
 
-  %td
+  %td.hidden-xs
     = render 'projects/deployments/actions', deployment: deployment, allow_rollback: true
diff --git a/app/views/projects/environments/_environment.html.haml b/app/views/projects/environments/_environment.html.haml
index 53df563d9cf..251694e897c 100644
--- a/app/views/projects/environments/_environment.html.haml
+++ b/app/views/projects/environments/_environment.html.haml
@@ -27,5 +27,5 @@
     - if last_deployment
       #{time_ago_with_tooltip(last_deployment.created_at)}
 
-  %td
+  %td.hidden-xs
     = render 'projects/deployments/actions', deployment: last_deployment
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 2d5c0c9d54f..ab801409722 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -9,26 +9,27 @@
         = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
           New environment
 
-  - if @environments.blank?
-    .blank-state.blank-state-no-icon
-      %h2.blank-state-title
-        You don't have any environments right now.
-      %p.blank-state-text
-        Environments are places where code gets deployed, such as staging or production.
-        %br
-        = succeed "." do
-          = link_to "Read more about environments", help_page_path("ci/environments")
-      - if can?(current_user, :create_environment, @project)
-        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
-          New environment
-  - else
-    .table-holder
-      %table.table.builds.environments
-        %tbody
-          %th Environment
-          %th Last Deployment
-          %th Build
-          %th Commit
-          %th
-          %th
-        = render @environments
+  .environments-container
+    - if @environments.blank?
+      .blank-state.blank-state-no-icon
+        %h2.blank-state-title
+          You don't have any environments right now.
+        %p.blank-state-text
+          Environments are places where code gets deployed, such as staging or production.
+          %br
+          = succeed "." do
+            = link_to "Read more about environments", help_page_path("ci/environments")
+        - if can?(current_user, :create_environment, @project)
+          = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
+            New environment
+    - else
+      .table-holder
+        %table.table.builds.environments
+          %tbody
+            %th Environment
+            %th Last Deployment
+            %th Build
+            %th Commit
+            %th
+            %th.hidden-xs
+          = render @environments
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index 8f8c1c4ce22..7a8d196cf4e 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -12,26 +12,27 @@
           = link_to 'Edit', edit_namespace_project_environment_path(@project.namespace, @project, @environment), class: 'btn'
           = link_to 'Destroy', namespace_project_environment_path(@project.namespace, @project, @environment), data: { confirm: 'Are you sure you want to delete this environment?' }, class: 'btn btn-danger', method: :delete
 
-  - if @deployments.blank?
-    .blank-state.blank-state-no-icon
-      %h2.blank-state-title
-        You don't have any deployments right now.
-      %p.blank-state-text
-        Define environments in the deploy stage(s) in
-        %code .gitlab-ci.yml
-        to track deployments here.
-      = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
-  - else
-    .table-holder
-      %table.table.builds.environments
-        %thead
-          %tr
-            %th ID
-            %th Commit
-            %th Build
-            %th
-            %th
+  .deployments-container
+    - if @deployments.blank?
+      .blank-state.blank-state-no-icon
+        %h2.blank-state-title
+          You don't have any deployments right now.
+        %p.blank-state-text
+          Define environments in the deploy stage(s) in
+          %code .gitlab-ci.yml
+          to track deployments here.
+        = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
+    - else
+      .table-holder
+        %table.table.builds.environments
+          %thead
+            %tr
+              %th ID
+              %th Commit
+              %th Build
+              %th
+              %th.hidden-xs
 
-        = render @deployments
+          = render @deployments
 
-    = paginate @deployments, theme: 'gitlab'
+      = paginate @deployments, theme: 'gitlab'