Responsive table fixes

6 files changed, 25 insertions, 16 deletions

diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index 28597c799df..8120ef182d4 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -230,7 +230,7 @@ export default {
       </div>
     </div>
 
-    <div class="content-list environments-container">
+    <div class="environments-container">
       <loading-icon
         label="Loading environments"
         size="3"
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 41d5453f1b2..a2448520a5f 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -70,7 +70,7 @@ export default {
       </span>
     </button>
 
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu dropdown-menu-align-right">
       <li v-for="action in actions">
         <button
           type="button"
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 03eb51ba1b2..de2269118cd 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -422,11 +422,13 @@ export default {
 </script>
 <template>
   <div
-    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }">
+    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"
+    role="row">
     <div class="table-section section-10" role="gridcell">
       <div
         v-if="!model.isFolder"
-        class="table-mobile-header">
+        class="table-mobile-header"
+        role="rowheader">
         Environment
       </div>
       <a
@@ -497,6 +499,7 @@ export default {
     <div class="table-section section-25" role="gridcell">
       <div
         v-if="!model.isFolder"
+        role="rowheader"
         class="table-mobile-header">
         Commit
       </div>
@@ -513,7 +516,7 @@ export default {
       </div>
       <div
         v-if="!model.isFolder && !hasLastDeploymentKey"
-        class="commit-title">
+        class="commit-title table-mobile-content">
         No deployments yet
       </div>
     </div>
@@ -521,6 +524,7 @@ export default {
     <div class="table-section section-10" role="gridcell">
       <div
         v-if="!model.isFolder"
+        role="rowheader"
         class="table-mobile-header">
         Updated
       </div>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index f9262ab85c5..b1fd9db650b 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -47,19 +47,19 @@ export default {
 <template>
   <div class="ci-table" role="grid">
     <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10 environments-name" role="rowheader">
+      <div class="table-section section-10 environments-name" role="columnheader">
         Environment
       </div>
-      <div class="table-section section-10 environments-deploy" role="rowheader">
+      <div class="table-section section-10 environments-deploy" role="columnheader">
         Deployment
       </div>
-      <div class="table-section section-15 environments-build" role="rowheader">
+      <div class="table-section section-15 environments-build" role="columnheader">
         Job
       </div>
-      <div class="table-section section-25 environments-commit" role="rowheader">
+      <div class="table-section section-25 environments-commit" role="columnheader">
         Commit
       </div>
-      <div class="table-section section-10 environments-date" role="rowheader">
+      <div class="table-section section-10 environments-date" role="columnheader">
         Updated
       </div>
     </div>
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index a24483fa431..f0a4c66aa1a 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -19,10 +19,6 @@
   .table-section {
     white-space: nowrap;
 
-    .branch-commit {
-      max-width: 100%;
-    }
-
     $section-widths: 10 15 20 25 30 40;
     @each $width in $section-widths {
       &.section-#{$width} {
@@ -87,4 +83,9 @@
   @media (min-width: $screen-md-min) {
     flex: 0 0 90%;
   }
+
+  .avatar {
+    float: none;
+    margin-right: 4px;
+  }
 }
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index a44a8bce879..b24803678ea 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -143,8 +143,8 @@
         }
 
         > .btn-group,
-        .external-url,
-        .btn {
+        > .external-url,
+        > .btn {
           flex: 1;
           flex-basis: 28px;
           margin: 0 5px;
@@ -153,6 +153,10 @@
         .dropdown-new {
           width: 100%;
         }
+
+        .dropdown-menu {
+          min-width: initial;
+        }
       }
     }
   }