More tables

5 files changed, 15 insertions, 17 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 142c90968e3..2e24f1f1a8b 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -422,7 +422,7 @@ export default {
 </script>
 <template>
   <div
-    :class="{ 'js-child-row': model.isChildren, 'folder-row' : model.isFolder }" class="gl-responsive-table-row">
+    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row' : model.isFolder }" class="gl-responsive-table-row">
     <div class="table-section section-10">
       <div
         v-if="!model.isFolder"
@@ -431,7 +431,6 @@ export default {
       <a
         v-if="!model.isFolder"
         class="environment-name flex-truncate-parent mobile-content"
-        :class="{ 'prepend-left-default': model.isChildren }"
         :href="environmentPath">
         <span class="flex-truncate-child">{{model.name}}</span>
       </a>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 1a7dbc511ed..4f010536ff2 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -93,7 +93,7 @@ export default {
           <div>
             <div
               colspan="6"
-              class="text-center">
+              class="text-center prepend-top-10">
               <a
                 :href="folderUrl(model)"
                 class="btn btn-default">
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index 0c20573b9f8..5e44bdf0e4f 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -1,19 +1,16 @@
 .gl-responsive-table {
   .gl-responsive-table-row {
-    display: flex;
-    justify-content: space-between;
-    flex-flow: row nowrap;
-    align-items: center;
-    padding: 15px 0;
     border-bottom: 1px solid $white-normal;
 
+    @media (min-width: $screen-md-min) {
+      padding: 15px 0;
+      display: flex;
+      align-items: center;
+    }
+
     @media (max-width: $screen-sm-max) {
-      flex-direction: column;
-      flex-wrap: nowrap;
-      align-items: baseline;
       margin-top: 10px;
       border: 1px solid $border-color;
-      padding: 0;
     }
 
     .table-section {
@@ -36,7 +33,9 @@
         @media (max-width: $screen-sm-max) {
           display: flex;
           align-self: stretch;
-          padding: 15px;
+          padding: 10px;
+          align-items: center;
+          height: 62px;
 
           &:not(:first-of-type) {
             border-top: 1px solid $white-normal;
@@ -53,6 +52,7 @@
   }
 
   .responsive-mobile-header {
+    color: $gl-text-color-secondary;
     flex: 0 0 120px;
 
     @media (min-width: $screen-md-min) {
@@ -69,7 +69,6 @@
 
   .flex-truncate-parent {
     display: flex;
-    flex-flow: row wrap;
   }
 
   .flex-truncate-child {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index a4b41795dda..616cc6890d5 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -136,7 +136,6 @@
     .environment-action-buttons {
       padding: 10px;
       display: flex;
-      justify-content: space-between;
 
       .btn {
         border-radius: 3px;
@@ -144,7 +143,8 @@
 
       > .btn-group,
       .external-url {
-        flex: 0 0 48%;
+        flex: 1;
+        flex-basis: 28px;
       }
 
       .dropdown-new {
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index effbc6c3ee1..2862971bec4 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -29,6 +29,6 @@ describe('Environment item', () => {
       },
     }).$mount();
 
-    expect(component.$el.tagName).toEqual('TABLE');
+    expect(component.$el.getAttribute('class')).toContain('ci-table');
   });
 });