Fix how template list item focus extends

We use a hack to extend the focus style of single
links in template list items (those not part of a
path of links).

This extended the 'focus box' downwards so it
covered the hint text below the link by the height
of the link (which is block-level).

Problems happen if the link wraps to multiple
lines. The hint is always on one line so the focus
looks over-extended.

These changes guard against those problems by
using the line-height instead of the block-height.
They include adding a Sass function to reference
the line-heights in GOVUK Frontend's Sass API:

https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale

app/assets/stylesheets/components/message.scss

@@ -1,3 +1,6 @@
+$app-body-text-line-height-default: get-govuk-typography-style($size: 19, $breakpoint: null, $property: "line-height");
+$app-body-text-line-height-tablet: get-govuk-typography-style($size: 19, $breakpoint: tablet, $property: "line-height");
+
 @mixin separator {
   display: inline-block;
   vertical-align: top;
@@ -95,9 +98,14 @@ a {
           content: '';
           position: absolute;
           left: 0px;
-          bottom: -100%; /* extend link by 100% of vertical size so it covers the hint/meta */
+          bottom: -1 * $app-body-text-line-height-default; /* extend link by line height of hint/meta so it covers it */
           width: 100%;
-          height: 100%;
+          height: $app-body-text-line-height-default;
+
+          @include govuk-media-query($from: tablet) {
+            bottom: -1 * $app-body-text-line-height-tablet;
+            height: $app-body-text-line-height-tablet;
+          }
         }
 
         &:active,