Matching vertical margins for new `js-post-category-messages`

* Shared margin rules for `.box-warning` and `.extra-category-questions`
  in `_base.scss` and `_layout.scss` (where the margin can potentially
  change based on the `$mappage-sidebar-padding` variable).
* Move the Sass rules for `.box-warning` further up `_base.scss` to be
  next to `.extra-category-questions` since they’re both so similar.
* No need for `.full-width` on the `.extra-category-questions` div since
  we were overriding the margin-top anyway.
* Remove the little triangle between the category select box and the
  grey `.extra-category-questions` div, since the category questions
  isn’t always presented immediately after the category select box.

3 files changed, 56 insertions, 63 deletions

diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html
index f787b9c52..c7bdad94d 100644
--- a/templates/web/base/report/new/category_extras.html
+++ b/templates/web/base/report/new/category_extras.html
@@ -9,7 +9,7 @@
 
   [%- IF category_extras.$category.size %]
     [% UNLESS category_extras_hidden.$category %]
-      <div class="extra-category-questions full-width">
+      <div class="extra-category-questions">
         <h2 class="form-section-heading">[% category %]</h2>
         <p class="form-section-description">
           [% tprintf(
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 419d0965e..14d5d2607 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -2043,31 +2043,65 @@ label .muted {
   }
 }
 
+.box-warning,
+.extra-category-questions {
+  margin: 1em -1em;
+}
+
 .extra-category-questions {
   background-color: #eee;
   padding: 1em;
-  margin-top: 1.5em; // make room for the triangle
-  position: relative;
-
-  // An upwards pointing triangle
-  &:before {
-    content: "";
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 1em 1em 1em;
-    border-color: transparent transparent #eee transparent;
-    position: absolute;
-    top: -0.9em; // avoid hairline gap between triangle and parent
-    #{$left}: 1.5em;
-  }
 
   & > :first-child {
     margin-top: 0;
   }
 }
 
+.box-warning {
+    padding: 2em 2em;
+    background-color: mix(#fff, $primary, 70%);
+
+    h1 {
+        font-size: 1.4em;
+    }
+
+    p {
+        margin-bottom: 0.5em;
+    }
+
+    .btn, .btn-primary {
+        margin: 0.5em 0 1em 0;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .segmented-control {
+        .btn {
+            &:last-child {
+                margin-bottom: 1em;
+            }
+        }
+    }
+}
+
+.asset-spot:before {
+    content: "";
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border: 2px solid #000;
+    background-color: #ffff00;
+    margin: 0 0.3em 0 0.2em;
+    border-radius: 100%;
+    vertical-align: -2px;
+}
+
 // The coloured sidebar column on .with-actions pages.
 // On narrow screens, it becomes a full-width section.
 #side-inspect {
@@ -2610,52 +2644,6 @@ a#geolocate_link.loading, .btn--geolocate.loading {
   }
 }
 
-.box-warning {
-    margin: 1em -1em;
-    padding: 2em 2em;
-    background-color: mix(#fff, $primary, 70%);
-
-    h1 {
-        font-size: 1.4em;
-    }
-
-    p {
-        margin-bottom: 0.5em;
-    }
-
-    .btn, .btn-primary {
-        margin: 0.5em 0 1em 0;
-
-        &:first-child {
-            margin-top: 0;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    .segmented-control {
-        .btn {
-            &:last-child {
-                margin-bottom: 1em;
-            }
-        }
-    }
-}
-
-.asset-spot:before {
-    content: "";
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border: 2px solid #000;
-    background-color: #ffff00;
-    margin: 0 0.3em 0 0.2em;
-    border-radius: 100%;
-    vertical-align: -2px;
-}
-
 $nicetable-cell-padding: 0.6em 1.5em !default;
 $nicetable-border-color: #ccc !default;
 $nicetable-stripe-background: rgba($primary, 0.05) !default;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index fb42b39ad..0cbb6a007 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -200,6 +200,11 @@ body.mappage {
 //  }
 }
 
+.box-warning,
+.extra-category-questions {
+  margin: 1em ($mappage-sidebar-padding * -1);
+}
+
 // Want to cover over the blue sidebar
 body.mappage.admin {
     .full-width--top {