Use ::after to fix map sidebar bottom padding.

This improves upon the previous commit to work with whatever contents
the map sidebar has (e.g. the list on an around page was also being cut
off before the end).

1 files changed, 17 insertions, 6 deletions

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index c288e1b8a..53d827f05 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -367,7 +367,7 @@ body.mappage {
   #{$left}: 0;
   bottom: 0;
   width: 27em; // width of sidebar, minus padding
-  padding: 1em 1em 3em 1em; // extra padding-bottom to clear the .shadow-wrap element
+  padding: 1em 1em 0 1em; // Bottom padding taken care of by ::after
   overflow: auto; // vertical scrollbar when list is taller than window
   background-color: #fff; // since no longer in the flow inside .content
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
@@ -380,6 +380,21 @@ body.mappage {
   }
 }
 
+// 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.
+#map_sidebar::after {
+    content: "";
+    display: block;
+    height: 4em;
+}
+
+// IE<=8 does not support ::after
+.iel8 #map_sidebar {
+    padding-bottom: 4em;
+}
+
 #skip-this-step {
   display: block;
   color: inherit;
@@ -698,7 +713,7 @@ body.authpage {
   bottom: 0;
   width: 29em;
   overflow: hidden;
-  padding-top: 3em;
+  padding-top: 2em;
   ul#key-tools {
     border-top: 0.25em solid $primary;
     margin: 0;
@@ -771,10 +786,6 @@ body.authpage {
 #report-updates-data fieldset {
     margin-bottom: 0;
 }
-// Stop bottom of update form disappearing behind the #key-tools shadow
-#update_form {
-  padding-bottom: 4em;
-}
 
 .big-green-banner {
   top: auto;