1 files changed, 37 insertions, 22 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 012ff1f975b..03eb51ba1b2 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -421,14 +421,19 @@ export default {
 };
 </script>
 <template>
-  <tr :class="{ 'js-child-row': model.isChildren }">
-    <td>
+  <div
+    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }">
+    <div class="table-section section-10" role="gridcell">
+      <div
+        v-if="!model.isFolder"
+        class="table-mobile-header">
+        Environment
+      </div>
       <a
         v-if="!model.isFolder"
-        class="environment-name"
-        :class="{ 'prepend-left-default': model.isChildren }"
+        class="environment-name flex-truncate-parent table-mobile-content"
         :href="environmentPath">
-        {{model.name}}
+        <span class="flex-truncate-child">{{model.name}}</span>
       </a>
       <span
         v-else
@@ -461,9 +466,9 @@ export default {
           {{model.size}}
         </span>
       </span>
-    </td>
+    </div>
 
-    <td class="deployment-column">
+    <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell">
       <span v-if="shouldRenderDeploymentID">
         {{deploymentInternalId}}
       </span>
@@ -478,21 +483,26 @@ export default {
           :tooltip-text="deploymentUser.username"
         />
       </span>
-    </td>
+    </div>
 
-    <td class="environments-build-cell">
+    <div class="table-section section-15 hidden-xs hidden-sm" role="gridcell">
       <a
         v-if="shouldRenderBuildName"
         class="build-link"
         :href="buildPath">
         {{buildName}}
       </a>
-    </td>
+    </div>
 
-    <td>
+    <div class="table-section section-25" role="gridcell">
+      <div
+        v-if="!model.isFolder"
+        class="table-mobile-header">
+        Commit
+      </div>
       <div
         v-if="!model.isFolder && hasLastDeploymentKey"
-        class="js-commit-component">
+        class="js-commit-component table-mobile-content">
         <commit-component
           :tag="commitTag"
           :commit-ref="commitRef"
@@ -501,25 +511,30 @@ export default {
           :title="commitTitle"
           :author="commitAuthor"/>
       </div>
-      <p
+      <div
         v-if="!model.isFolder && !hasLastDeploymentKey"
         class="commit-title">
         No deployments yet
-      </p>
-    </td>
+      </div>
+    </div>
 
-    <td>
+    <div class="table-section section-10" role="gridcell">
+      <div
+        v-if="!model.isFolder"
+        class="table-mobile-header">
+        Updated
+      </div>
       <span
         v-if="!model.isFolder && canShowDate"
-        class="environment-created-date-timeago">
+        class="environment-created-date-timeago table-mobile-content">
         {{createdDate}}
       </span>
-    </td>
+    </div>
 
-    <td class="environments-actions">
+    <div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
       <div
         v-if="!model.isFolder"
-        class="btn-group pull-right"
+        class="btn-group environment-action-buttons"
         role="group">
 
         <actions-component
@@ -553,6 +568,6 @@ export default {
           :retry-url="retryUrl"
           />
       </div>
-    </td>
-  </tr>
+    </div>
+  </div>
 </template>