From 828854583f09924e1b31d3f37ad9578aad038003 Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Mon, 19 Aug 2024 14:58:54 +0100
Subject: [PATCH] Added word-break attribute to confirmation-header paragraph

Currently if an user access a non existent page no mobile that has a long url, it will cause the screen to overflow.
---
 web/cobrands/sass/_base.scss   | 1 +
 web/cobrands/sass/_layout.scss | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 6a870d4886..ded3ea1dfd 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -3011,6 +3011,7 @@ a#geolocate_link {
     color: #666666;
     font-size: 1.2em;
     margin-bottom: 0.5em;
+    word-break: break-word; // It prevents screen overflow when there is a long url, when a page has not been found.
   }
 
   & > :last-child {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 5b83c32292..65b336d6c0 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -903,6 +903,10 @@ textarea.form-error {
     text-align: $left;
     padding: flip(3em 0 3em 132px, 3em 132px 3em 0); // for tick icon
     background-position: $left 2em;
+
+    p {
+      word-break: normal;
+    }
 }
 
 // Offline reporting UI