Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prevent panel text overflowing when zoomed in on mobile #2347

Merged
merged 3 commits into from
Sep 27, 2021
Merged

Prevent panel text overflowing when zoomed in on mobile #2347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bfa7d14
Prevent panel text from overflowing on mobile zoom
hannalaakso Sep 14, 2021
9d7cf08
Add content to panel example to demonstrate longer text
hannalaakso Sep 14, 2021
d3fe242
Update changelog
hannalaakso Sep 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions app/views/full-page-examples/passport-details/confirm.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 13 additions & 1 deletion src/govuk/components/panel/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}

Expand Down