From 04c17ecfc074ee63ff6adad0548c59203f42838e Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 23 Jan 2017 10:58:13 +0000
Subject: [PATCH] Make vertical spacing CSS classes work with floats
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We have a bunch of helper classes (bottom gutter) which are used to
vertically separate components on the page.

This vertical spacing might get ignored if one of these containers
contains floated items. This is because:

> elements that contain floated items don't take those floated items
> into account in calculating their height
– https://css-tricks.com/containers-dont-clear-floats/

GOV.UK Frontend toolkit has a shim to prevent this from happening.
https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55

So this commit uses that shim to make the spacing consistent in older
and newer browsers, irrespective of whether floats are being applied.

This hasn’t been a problem because we’re not using a lot of `float` in
Notify. But we are using it now to work around some other
inconsistencies in old browsers.
---
 app/assets/stylesheets/_grids.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss
index 9c03da0ee..8e59bede1 100644
--- a/app/assets/stylesheets/_grids.scss
+++ b/app/assets/stylesheets/_grids.scss
@@ -22,24 +22,30 @@
   @include grid-column(7/8);
 }
 
+%bottom-gutter,
 .bottom-gutter {
+  @extend %contain-floats;
   margin-bottom: $gutter;
   clear: both;
 }
 
 .bottom-gutter-2-3 {
+  @extend %bottom-gutter;
   margin-bottom: $gutter-two-thirds;
 }
 
 .bottom-gutter-1-2 {
+  @extend %bottom-gutter;
   margin-bottom: $gutter-half;
 }
 
 .bottom-gutter-3-2 {
+  @extend %bottom-gutter;
   margin-bottom: $gutter * 3/2;
 }
 
 .bottom-gutter-2 {
+  @extend %bottom-gutter;
   margin-bottom: $gutter * 2;
 }