There are 2 problems with alignment of page issues and given they impact each other, they will be fixed in tandem.
===Description of problem 1
There is ~14px of extra space below the content in the mobile page issues banner. This offsets the content such that it is not vertically centered within the banner. At first I thought this was related to T214548, but after messing around with the positioning of the learn more link a bit I'm not entirely sure. I'm seeing this issue on:
- Android / Chrome, Firefox
- iOS / Safari, Chrome, Firefox
- MacOS / Safari, Chrome, Firefox
===Design notes
{F28010633}
== Description of problem 2
===Description
Currently the "Learn more" link is appearing 6px too low in the mobile page issues banner, and is therefore not in line with the rest of the text. I'm seeing this issue on:
- Android / Chrome, Firefox
- iOS / Safari, Chrome, Firefox
- MacOS / Safari, Chrome, Firefox
===Documentation
| iOS / Chrome | Android / Chrome
| {F28010534} | {F28010537}
===Design notes
{F28010558}
===Development notes
From an offline conversation with @Jdrewniak:
>Should be an easy fix though, just changing `bottom: 8px` to `bottom: 1em`
This still seems to be 1px off. I tried `bottom: 14px` which seemed to align it.
See T214549#4907439
Changes apply to all pages with issues.
=== QA steps
On production, verify that the page-issue banners have equal spacing at the top and bottom, and that the "learn more" link is aligned with the text in the banner.