Improve vertical alignment of phase banner tag on mobile devices

[matthewmascord]

This PR is designed to improve the vertical alignment of the phase banner tag when viewed on mobile devices. Following consultation with @timpaul and @christopherthomasdesign it was agreed that the desired behaviour should be:

• single line of text = centre-aligned
• multiple lines of text = top-aligned

In order to fix this problem, it was necessary to wrap the tag element in a SPAN with display: table-cell, allowing the vertical alignment of the tag to be controlled.

Before:

After:

Tested on:
Windows 7, IE8
Windows 7, IE9
Windows 7, IE10
Windows 10, IE11
Windows 10, Firefox 84
Windows 10, Chrome 88
Windows 10, Edge 88
Galaxy S8, Android 7, Chrome
Galaxy S8, Android 7, Samsung Internet
iPhone 8, iOS 13, Safari
iPhone 8, iOS 13, Chrome
macOS Catalina, Firefox 85
macOS Catalina, Safari 14
macOS Catalina, Chrome 88

[matthewmascord]

Hello, did we have any thoughts around this? Any concerns?

[timpaul]

Hi @matthewmascord - sorry for the delay in getting back. We're really keen to avoid any additional markup changes if possible, as that would then be a breaking change. Do you think there's a way of achieving something similar without the additional span?

[matthewmascord]

Thanks @timpaul , interesting question, I can certainly look into that. I didn't realise adding markup was always a breaking change - what makes it breaking exactly?

[matthewmascord]

Hello @timpaul, I've simplified the solution removing the markup changes and retested on the above devices.

It turned out that the solution was backwards compatible for HTML users with no markup changes because the default behaviour without the additional span with display: table-cell caused the tag to be aligned to the top anyway. Given this, I've removed the markup change for simplicity.

[CharlotteDowns]

@matthewmascord I am approving this suggestion, thank you for making it and testing it across browsers.