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

2 files changed, 84 insertions, 58 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 1cfd7ef01a8..4502b565aa9 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -8,32 +8,6 @@
   color: $gl-text-color-secondary;
 }
 
-/** COMMON CLASSES **/
-.prepend-top-0 { margin-top: 0; }
-.prepend-top-5 { margin-top: 5px; }
-.prepend-top-10 { margin-top: 10px; }
-.prepend-top-default { margin-top: $gl-padding !important; }
-.prepend-top-20 { margin-top: 20px; }
-.prepend-left-4 { margin-left: 4px; }
-.prepend-left-5 { margin-left: 5px; }
-.prepend-left-10 { margin-left: 10px; }
-.prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left: 20px; }
-.append-right-5 { margin-right: 5px; }
-.append-right-8 { margin-right: 8px; }
-.append-right-10 { margin-right: 10px; }
-.append-right-default { margin-right: $gl-padding; }
-.append-right-20 { margin-right: 20px; }
-.append-bottom-0 { margin-bottom: 0; }
-.append-bottom-5 { margin-bottom: 5px; }
-.append-bottom-10 { margin-bottom: 10px; }
-.append-bottom-15 { margin-bottom: 15px; }
-.append-bottom-20 { margin-bottom: 20px; }
-.append-bottom-default { margin-bottom: $gl-padding; }
-.inline { display: inline-block; }
-.center { text-align: center; }
-.vertical-align-middle { vertical-align: middle; }
-
 .underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: $hint-color; }
 .light { color: $common-gray; }
@@ -451,3 +425,30 @@ table {
   pointer-events: none;
   opacity: .5;
 }
+
+/** COMMON CLASSES **/
+.prepend-top-0 { margin-top: 0; }
+.prepend-top-5 { margin-top: 5px; }
+.prepend-top-10 { margin-top: 10px; }
+.prepend-top-15 { margin-top: 15px; }
+.prepend-top-default { margin-top: $gl-padding !important; }
+.prepend-top-20 { margin-top: 20px; }
+.prepend-left-4 { margin-left: 4px; }
+.prepend-left-5 { margin-left: 5px; }
+.prepend-left-10 { margin-left: 10px; }
+.prepend-left-default { margin-left: $gl-padding; }
+.prepend-left-20 { margin-left: 20px; }
+.append-right-5 { margin-right: 5px; }
+.append-right-8 { margin-right: 8px; }
+.append-right-10 { margin-right: 10px; }
+.append-right-default { margin-right: $gl-padding; }
+.append-right-20 { margin-right: 20px; }
+.append-bottom-0 { margin-bottom: 0; }
+.append-bottom-5 { margin-bottom: 5px; }
+.append-bottom-10 { margin-bottom: 10px; }
+.append-bottom-15 { margin-bottom: 15px; }
+.append-bottom-20 { margin-bottom: 20px; }
+.append-bottom-default { margin-bottom: $gl-padding; }
+.inline { display: inline-block; }
+.center { text-align: center; }
+.vertical-align-middle { vertical-align: middle; }
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 8e653c443cf..7adb2f113bb 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -3,57 +3,74 @@
   max-width: #{$max + '%'};
 }
 
+.gl-responsive-table-row-layout {
+  width: 100%;
+
+  @media (min-width: $screen-md-min) {
+    display: flex;
+    align-items: center;
+
+    & > &:not(:first-child) {
+      margin-top: $gl-padding;
+    }
+  }
+}
+
 .gl-responsive-table-row {
+  @extend .gl-responsive-table-row-layout;
   margin-top: 10px;
   border: 1px solid $border-color;
 
   @media (min-width: $screen-md-min) {
-    padding: 15px 0;
     margin: 0;
-    display: flex;
-    align-items: center;
+    padding: $gl-padding 0;
     border: none;
     border-bottom: 1px solid $white-normal;
   }
+}
+
+.gl-responsive-table-row-col-span {
+  flex-wrap: wrap;
+}
 
-  .table-section {
-    white-space: nowrap;
+.table-section {
+  white-space: nowrap;
 
-    $section-widths: 10 15 20 25 30 40;
-    @each $width in $section-widths {
-      &.section-#{$width} {
-        flex: 0 0 #{$width + '%'};
+  $section-widths: 10 15 20 25 30 40 100;
+  @each $width in $section-widths {
+    &.section-#{$width} {
+      flex: 0 0 #{$width + '%'};
 
-        @media (min-width: $screen-md-min) {
-          max-width: #{$width + '%'};
-        }
+      @media (min-width: $screen-md-min) {
+        max-width: #{$width + '%'};
       }
     }
+  }
 
-    &:not(.table-button-footer) {
-      @media (max-width: $screen-sm-max) {
-        display: flex;
-        align-self: stretch;
-        padding: 10px;
-        align-items: center;
-        min-height: 62px;
+  @media (max-width: $screen-sm-max) {
+    display: flex;
+    align-self: stretch;
+    padding: 10px;
+    align-items: center;
+    min-height: 62px;
 
-        &:not(:first-of-type) {
-          border-top: 1px solid $white-normal;
-        }
-      }
+    &:not(:first-child) {
+      border-top: 1px solid $white-normal;
     }
+  }
 
-    &.section-wrap {
-      white-space: normal;
+  &.section-wrap {
+    white-space: normal;
 
-      @media (max-width: $screen-sm-max) {
-        flex-wrap: wrap;
-      }
+    @media (max-width: $screen-sm-max) {
+      flex-wrap: wrap;
     }
   }
-}
 
+  &.section-align-top {
+    align-self: flex-start;
+  }
+}
 
 .table-button-footer {
   @media (min-width: $screen-md-min) {
@@ -61,12 +78,13 @@
   }
 
   @media (max-width: $screen-sm-max) {
-    background-color: $gray-normal;
+    display: block;
     align-self: stretch;
+    min-height: 0;
+    background-color: $gray-normal;
     border-top: 1px solid $border-color;
 
     .table-action-buttons {
-      padding: 10px 5px;
       display: flex;
 
       .btn {
@@ -77,7 +95,14 @@
       > .external-url,
       > .btn {
         flex: 1 1 28px;
-        margin: 0 5px;
+
+        &:not(:first-child) {
+          margin-left: 5px;
+        }
+
+        &:not(:last-child) {
+          margin-right: 5px;
+        }
       }
 
       .dropdown-new {