Refactor responsive table styles to support nested error block

 - Split layout from the styles of the row
 - Move command `.append-` `.prepend-` styles to bottom of source order
    - Actually applies styles over others in more situations which is
      probably what is expected when you add it to an element
    - Also allows us to get rid of some styles that were trying to get
      around this fact

See https://i.imgur.com/IE50PK6.png
Which is used in
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15064

Design from https://gitlab.com/gitlab-org/gitlab-ce/issues/38464

3 files changed, 4 insertions, 10 deletions

diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 8d6f30e3b84..5c91579c69c 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -2,8 +2,4 @@
   .clipboard-addon {
     background-color: $white-light;
   }
-
-  .alert-block {
-    margin-bottom: 10px;
-  }
 }
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 3b5e411e2c5..6c1d32bed2f 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -133,12 +133,11 @@
 }
 
 .folder-row {
-  padding: 15px 0;
-  border-bottom: 1px solid $white-normal;
+  border-left: none;
+  border-right: none;
 
-  @media (max-width: $screen-sm-max) {
-    border-top: 1px solid $white-normal;
-    margin-top: 10px;
+  @media (min-width: $screen-sm-max) {
+    border-top: none;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8fc7a5eec9b..ee94610d1d1 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -31,7 +31,6 @@
     }
 
     .pipeline-actions {
-      padding-right: 0;
       min-width: 170px; //Guarantees buttons don't break in several lines.
 
       .btn-default {