diff --git a/app/views/full-page-examples/check-your-answers/index.njk b/app/views/full-page-examples/check-your-answers/index.njk index 04bb8afb6d..888a4e8fc9 100644 --- a/app/views/full-page-examples/check-your-answers/index.njk +++ b/app/views/full-page-examples/check-your-answers/index.njk @@ -177,6 +177,39 @@ } ] } + }, + { + key: { + text: "Additional details" + }, + value: { + html: ' +
I have contacted my council for a Temporary Event Notice (TEN) as I want to carry out a ‘licensable activity’ on unlicensed premises in England or Wales.
+ +Licensable activity includes:
+ ++ To find out more you can visit out website at: + https://reallylongurlformyeventthatneedsatemporaryeventsnotice.com +
+ ' + }, + actions: { + items: [ + { + href: "#/additional-details", + text: "Change", + visuallyHiddenText: "additional details" + } + ] + } } ] }) }} diff --git a/src/components/summary-list/_summary-list.scss b/src/components/summary-list/_summary-list.scss index e44a9144a6..2940b2ba2a 100644 --- a/src/components/summary-list/_summary-list.scss +++ b/src/components/summary-list/_summary-list.scss @@ -10,6 +10,7 @@ @include govuk-media-query($from: tablet) { display: table; width: 100%; + table-layout: fixed; // Required to allow us to wrap words that overflow. } margin: 0; // Reset default user agent styles @include govuk-responsive-margin(6, "bottom"); @@ -49,6 +50,7 @@ .govuk-summary-list__actions { margin-bottom: govuk-spacing(3); @include govuk-media-query($from: tablet) { + width: 20%; padding-right: 0; text-align: right; } @@ -56,10 +58,9 @@ .govuk-summary-list__key, .govuk-summary-list__value { - // sass-lint:disable no-duplicate-properties // Automatic wrapping for unbreakable text (e.g. URLs) - word-break: break-all; // Standards - word-break: break-word; // WebKit/Blink only + word-wrap: break-word; // Fallback for older browsers only + overflow-wrap: break-word; } .govuk-summary-list__key { @@ -74,6 +75,9 @@ @include govuk-media-query($until: tablet) { margin-bottom: govuk-spacing(3); } + @include govuk-media-query($from: tablet) { + width: 50%; + } } .govuk-summary-list__value > p { diff --git a/src/components/summary-list/summary-list.yaml b/src/components/summary-list/summary-list.yaml index f8217fc29b..bb5a7f5592 100644 --- a/src/components/summary-list/summary-list.yaml +++ b/src/components/summary-list/summary-list.yaml @@ -370,8 +370,8 @@ examples: text: Pneumonoultramicroscopicsilicovolcanoconiosis value: html: | -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis consequat diam. Duis efficitur justo at congue iaculis. Quisque scelerisque ornare justo nec congue. Duis egestas felis nibh, eu cursus metus rutrum eget. In dictum lectus diam, dapibus ullamcorper risus gravida a. Vestibulum tempor mattis sapien, at auctor tellus dignissim non. Praesent dictum felis nec diam tempor, vel lobortis leo ultricies.
-Suspendisse potenti. Aliquam dictum eu ipsum sed facilisis. Maecenas hendrerit est eget ultrices venenatis. Nam ex nisl, venenatis eget molestie quis, hendrerit id tellus. Morbi et posuere ex, vel interdum sapien. Mauris ac mattis turpis, interdum eleifend erat. Morbi eget efficitur lectus. Sed suscipit laoreet ipsum et iaculis. Integer ornare ipsum quis aliquet scelerisque. Proin venenatis dictum suscipit. Nunc tristique, felis quis fermentum rhoncus, tortor augue egestas ipsum, non porttitor nulla odio vitae purus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers' League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."
+Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.
actions: items: - href: '#'