Prevent details and summary margins collapsing

Now that we’re no longer using `display: inline-block` [^1], the the 5px bottom margin on the summary and the 30px bottom margin on the details now collapse when the <details> is closed *except* in Chrome which has been updated to use `content-visibility` [2].

Preserve the existing margin on the component and make the behaviour across browsers consistent by establishing a new block formatting context using `display: flow-root`, preventing the margins from collapsing.

Safari < 13 does not support `display: flow-root` and so the margins will collapse, which means these older versions of Safari will have 5px less margin than when we were still using `display: inline-block`.

[^1]: ‘margins of inline-block boxes do not collapse (not even with their in-flow children)’ – https://www.w3.org/TR/CSS21/box.html#collapsing-margins
[2]: https://issues.chromium.org/issues/40815464
[3]: https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements

packages/govuk-frontend/src/govuk/components/details/_index.scss

@@ -4,7 +4,9 @@
     @include govuk-text-colour;
     @include govuk-responsive-margin(6, "bottom");
 
-    display: block;
+    // Prevent bottom margins on summary and details from collapsing in Firefox
+    // and Safari, matching Chrome's behaviour (https://crbug.com/40815464)
+    display: flow-root;
   }
 
   .govuk-details__summary {