Merge pull request #2366 from alphagov/fix-panel-overflow

Fix panel text overflowing when zoomed in on mobile

Author: Vanita Barrett

CHANGELOG.md

@@ -10,6 +10,9 @@ You can now use the `govuk-!-text-align-left`, `govuk-!-text-align-centre` and `
 
 This was added in [pull request #2368: Add text align override classes](https://github.com/alphagov/govuk-frontend/pull/2368).
 
+### Fixes
+
+- [#2366: Fix panel text overflowing when zoomed in on mobile #2366](https://github.com/alphagov/govuk-frontend/pull/2366)
 
 ## 3.13.1 (Fix release)
 

app/views/full-page-examples/passport-details/confirm.njk

@@ -2,14 +2,15 @@
 
 {% from "panel/macro.njk" import govukPanel %}
 
-{% set pageTitle = "Passport details submitted" %}
+{% set pageTitle = "We have emailed you a confirmation" %}
 {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
 
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       {{ govukPanel({
-        titleText: pageTitle
+        titleText: pageTitle,
+        html: "Your reference number<br><strong>HDJ2123F</strong>"
       }) }}
     </div>
   </div>

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)
     }
   }