Safari alignment issue with Footer list containing odd number of items

[frankieroberto]

The footer with secondary navigation and links to meta information component has a small bug which is only visible in desktop Safari.

If there's an odd number of items in the list, the right hand side has some extra whitespace at the top causing the links to be un-aligned:

You can replicate this by removing the "Benefits" item from the list in the example using the Web inspector.

[vanitabarrett]

As mentioned in v4.0.0 prioritisation, we're going to do a timeboxed investigation into #1726 and #1539 first. It's possible that this issue might be fixed if we switch to a different layout system in the footer. We should make sure we keep this card in mind when doing any testing during that investigation.

[querkmachine]

When reproducing this for reporting to the WebKit team, it appears that a major cause of this issue is due to the final item in the list having the bottom margin removed. Restoring the margin fixes the layout issue.

We currently remove the bottom margin of the final list item so that there isn't a larger than desired space below the list when it appears as a single column (= container margin + list item margin), but given we're switching to columns on the basis of a media query anyway, it may be possible for us to rectify this issue in our own code by making this margin removal conditional on a media query.