Fix feedback component layout on mobile

[kr8n3r]

What

Fix Feedback component layout on mobile.

• uses CSS grid for mobile viewport. Grid is supported in at least two previous mobile browsers - Safari, Chrome, Firefox, Samsung internet that we a majority of users on
• moves link classes to list elements and introduces additional classes to use with the grid positioning

Why

With #1207 we inadvertently broke the component's layout on mobile.

Before #1207

See: https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style

After #1207

See: https://www.gov.uk/change-name-deed-poll

After this change

https://govuk-publishing-compo-pr-1211.herokuapp.com/component-guide/feedback

Alternative options

• rollback Change tags and styling for feedback component #1207 and think of a better no-css approach
• keep Change tags and styling for feedback component #1207 and just with the Yes/no that sit underneath the heading

Trello ticket

[alex-ju]

Our very first second CSS grid usage 🎉 ! Looks good. Some inconsistencies with IEx on very narrow screens that, as you mentioned, could be addressed by wrapping the code with feature queries.

[andysellick]

https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss#L69 @alex-ju

[alex-ju]

@andysellick uuu.. I missed that one. Nice work @andysellick!

[kr8n3r]

@alex-ju added fallback for non-grid supporting browsers
added @supports to each list item as I'm already reseting padding, otherwise I'd to

> li {
display:inline-block;
...
}

[alex-ju]

@alex-ju added fallback for non-grid supporting browsers
added @supports to each list item as I'm already resetting padding

Super! Good to be merged.