Prevent panel text from overflowing on mobile zoom

What the problem is

Prevent text in the panel component from overflowing on mobile zoom. This overflowing is more likely to happen when user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible.

We should aim to meet the WCAG Text resize Success criterion which requires that text can be scaled up to 200%.

How this fixes it

Decrease the padding on mobile to allow the text flow better.

As an if-all-else-fails attempt to stop very long words from clipping, force them to break and wrap instead. Hopefully this is not something that would happen often since we’re reducing the padding to help with this.

We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the `govuk-font` mixin uses the responsive font scale which fixes font sizes for different breakpoints to make components behave consistently. There currently isn’t a way to override those set font sizes for `govuk-font`. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add such new feature to `govuk-font` at this point, but we’ll keep an eye out for similar requirements in the future.

We also considered progressively enhancing any words that wrap by using `hyphens: auto` to hyphenate them. However, we found that iOS Safari can omit the dash from some words but not others, or hyphenating unnecessarily; it seems that it would be introducing more issues than it would be solving. See #2347 for more details.

src/govuk/components/panel/_index.scss

@@ -12,7 +12,19 @@
     text-align: center;
 
     @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(6) - $govuk-border-width;
+      padding: govuk-spacing(3) - $govuk-border-width;
+
+      // This is an if-all-else-fails attempt to stop long words from overflowing the container
+      // on very narrow viewports by forcing them to break and wrap instead. This
+      // overflowing is more likely to happen when user increases text size on a mobile eg. using
+      // iOS Safari text resize controls.
+      //
+      // The overflowing is a particular problem with the panel component since it uses white
+      // text: when the text overflows the container, it is invisible on the white (page)
+      // background. When the text in our other components overflow, the user might have to scroll
+      // horizontally to view it but the the text remains legible.
+      overflow-wrap: break-word;
+      word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
     }
   }