Fix for hanging word in title

duckduckgo · Jan 30, 2025 · b85c74c · b85c74c
1 parent b6956d5
commit b85c74c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/special-pages/pages/special-error/app/components/App.module.css b/special-pages/pages/special-error/app/components/App.module.css
@@ -14,18 +14,6 @@ body {
     top: 0;
     left: 0;
 
-    /*  */
-    &::after {
-        content: ' ';
-        width: 1px;
-        height: 100%;
-        background: red;
-        position: absolute;
-        top: 0;
-        left: 50%;
-    }
-    /*  */
-
     @media (max-height: 400px) {
         padding-top: var(--sp-10);
         align-items: flex-start;

diff --git a/special-pages/pages/special-error/app/components/Warning.jsx b/special-pages/pages/special-error/app/components/Warning.jsx
@@ -53,7 +53,12 @@ export function WarningHeading() {
     return (
         <header className={classNames(styles.heading, styles[kind])}>
             <i className={styles.icon} aria-hidden="true" />
-            <Text as="h1" variant={platformName === 'macos' ? 'title-2-emphasis' : 'title-2'} strictSpacing={platformName !== 'macos'}>
+            <Text
+                as="h1"
+                variant={platformName === 'macos' ? 'title-2-emphasis' : 'title-2'}
+                strictSpacing={platformName !== 'macos'}
+                className={styles.title}
+            >
                 {heading}
             </Text>
         </header>

diff --git a/special-pages/pages/special-error/app/components/Warning.module.css b/special-pages/pages/special-error/app/components/Warning.module.css
@@ -125,4 +125,13 @@
         content: ' ';
         display: block;
     }
+
+    /* Forces a line break in the title on smaller screens */
+    & .title {
+        white-space: pre-line;
+
+        @media (min-width: 600px) {
+            white-space: normal;
+        }
+    }
 }
diff --git a/special-pages/pages/special-error/app/hooks/ErrorStrings.jsx b/special-pages/pages/special-error/app/hooks/ErrorStrings.jsx
@@ -62,11 +62,11 @@ export function useWarningHeading() {
     const { kind } = useErrorData();
 
     if (kind === 'phishing') {
-        return t('phishingPageHeading');
+        return t('phishingPageHeading').replace('{newline}', '\n');
     }
 
     if (kind === 'malware') {
-        return t('malwarePageHeading');
+        return t('malwarePageHeading').replace('{newline}', '\n');
     }
 
     if (kind === 'ssl') {

diff --git a/special-pages/pages/special-error/public/locales/en/special-error.json b/special-pages/pages/special-error/public/locales/en/special-error.json
@@ -26,8 +26,8 @@
     "note": "Button shown in an error page that warns users of security risks on a website due to Phishing or Malware issues. The buttons allows the user to visit the website anyway despite the risks."
   },
   "malwarePageHeading": {
-    "title": "Warning: This site may be a security risk",
-    "note": "Title shown in an error page that warn users of security risks on a website due to malware distribution"
+    "title": "Warning: This site may be a{newline}security risk",
+    "note": "Title shown in an error page that warn users of security risks on a website due to malware distribution. The {newline} part should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
   },
   "malwareTabTitle": {
     "title": "Warning: Security Risk",
@@ -42,8 +42,8 @@
     "note": "Title of the Advanced info section shown in an error page that warns users of security risks on a website due to malware distribution."
   },
   "phishingPageHeading": {
-    "title": "Warning: This site may be a security risk",
-    "note": "Title shown in an error page that warn users of security risks on a website due to Phishing issues"
+    "title": "Warning: This site may be a{newline}security risk",
+    "note": "Title shown in an error page that warn users of security risks on a website due to Phishing issues. The {newline} part should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
   },
   "phishingTabTitle": {
     "title": "Warning: Security Risk",