diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd483234a1..a2a3c24a55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 - [#2339: Add text align override classes](https://github.com/alphagov/govuk-frontend/pull/2339)
 
+### Fixes
+
+- [#2347: Fix panel text overflowing when zoomed in on mobile #2347](https://github.com/alphagov/govuk-frontend/pull/2347)
+
 ## 3.13.1 (Fix release)
 
 ### Fixes
diff --git a/app/views/full-page-examples/passport-details/confirm.njk b/app/views/full-page-examples/passport-details/confirm.njk
index 5aa1108ed8..d11cecd3f3 100644
--- a/app/views/full-page-examples/passport-details/confirm.njk
+++ b/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>
diff --git a/src/govuk/components/panel/_index.scss b/src/govuk/components/panel/_index.scss
index 5d7c23d881..3434a8eaf2 100644
--- a/src/govuk/components/panel/_index.scss
+++ b/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)
     }
   }