From 11b53f439e7e53b0eed794b38f6de24ee13876fc Mon Sep 17 00:00:00 2001
From: Paul Zuehlcke <pbz@mozilla.com>
Date: Wed, 2 Oct 2024 15:57:47 +0000
Subject: [PATCH] Bug 1920423,
 r=Gijs,desktop-theme-reviewers,reusable-components-reviewers,hjones

Differential Revision: https://phabricator.services.mozilla.com/D224303
---
 toolkit/content/widgets/popupnotification.js |  4 ++--
 toolkit/themes/shared/popupnotification.css  | 10 ++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/toolkit/content/widgets/popupnotification.js b/toolkit/content/widgets/popupnotification.js
index 8de832a15530..5b18465529ab 100644
--- a/toolkit/content/widgets/popupnotification.js
+++ b/toolkit/content/widgets/popupnotification.js
@@ -16,7 +16,7 @@
         ".popup-notification-description": "popupid,id=descriptionid",
         ".popup-notification-description > span:first-of-type":
           "text=label,popupid",
-        ".popup-notification-description > b:first-of-type":
+        ".popup-notification-description > .popup-notification-description-name":
           "text=name,popupid",
         ".popup-notification-description > span:nth-of-type(2)":
           "text=endlabel,popupid",
@@ -81,7 +81,7 @@
           <!-- These need to be on the same line to avoid creating
               whitespace between them (whitespace is added in the
               localization file, if necessary). -->
-          <description class="popup-notification-description"><html:span></html:span><html:b></html:b><html:span></html:span><html:b></html:b><html:span></html:span></description>
+          <description class="popup-notification-description"><html:span></html:span><html:b class="popup-notification-description-name"></html:b><html:span></html:span><html:b></html:b><html:span></html:span></description>
           <description class="popup-notification-hint-text"></description>
           <vbox class="popup-notification-bottom-content" align="start">
             <label class="popup-notification-learnmore-link" is="text-link" data-l10n-id="popup-notification-learn-more"></label>
diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css
index 6a3c52a915f8..4e25b8872469 100644
--- a/toolkit/themes/shared/popupnotification.css
+++ b/toolkit/themes/shared/popupnotification.css
@@ -53,6 +53,16 @@ popupnotificationcontent {
   flex: 1 auto;
 }
 
+/*
+ * Ensure that host names in PopupNotifications wrap. This targets the "name"
+ * element in the description container which is the "name" property of the
+ * PopupNotification. Name is what gets substituted from the l10n string using
+ * the placeholder <>.
+ */
+.popup-notification-description-name {
+  word-break: break-all;
+}
+
 .popup-notification-closebutton {
   margin-inline-end: -8px;
   margin-top: -8px;