A couple of CSS improvements on report page

 - Harmonise two-column sidebar with .with-notes convention
    `body.mappage.twocol` is now `body.mappage.with-actions` to make it
    more obvious that it’s just a special case like `.with-notes`.
 - Make sidebar padding-bottom work with floated children
 - Display a.btn elements correctly in Safari

1 files changed, 26 insertions, 23 deletions

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 73c614e91..3bf3612ae 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -333,29 +333,6 @@ body.mappage.admin {
     }
 }
 
-// Some report pages have a second column of UI elements so make room
-body.mappage.twocols {
-  #map_box {
-    #{$left}: 58em;
-  }
-
-  #map_sidebar {
-    width: 58em;
-    padding: 0;
-
-    #side-report, #side-report-secondary {
-      width: 50%;
-      float: #{$left};
-      padding: 1em;
-      box-sizing: border-box;
-    }
-
-    #side-report-secondary {
-      background-color: #eee;
-    }
-  }
-}
-
 #map_box {
   position: absolute;
   z-index: auto;
@@ -370,6 +347,10 @@ body.mappage.twocols {
   .with-notes & {
     #{$left}: 44em;
   }
+
+  .with-actions & {
+    #{$left}: 58em;
+  }
 }
 
 #map_sidebar {
@@ -390,16 +371,24 @@ body.mappage.twocols {
     background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
     background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
   }
+
+  .with-actions & {
+    width: 58em;
+    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+  }
 }
 
 // Firefox/IE and Chrome/Safari (e.g.) differ on where to clip overflowed
 // elements, one group clip outside padding, one clips inside. So using padding
 // in #map_sidebar works in Chrome/Safari but not in Firefox/IE. Instead, we
 // add some extra height using ::after.
+// https://bugzilla.mozilla.org/show_bug.cgi?id=748518
 #map_sidebar::after {
     content: "";
     display: block;
     height: 4em;
+    clear: both;
 }
 
 // IE<=8 does not support ::after
@@ -890,6 +879,20 @@ textarea.form-error {
   }
 }
 
+// Similar to .with-notes, there's a special version of the
+// report details page, that includes a secondary column.
+body.with-actions {
+  #side-report {
+    width: 27em;
+    float: #{$left};
+  }
+
+  #side-report-secondary {
+    width: 27em;
+    float: #{$right};
+  }
+}
+
 // More general notes
 .general-notes {
     font-size: 0.75em;