Merge pull request #120 from sg00dwin/toast-notification-issue1770

Use .word-break mixin along with max-width to enable word break within toast notifications.

dist/less/_notifications.less

@@ -8,7 +8,13 @@
 }
 
 .toast-notifications-list-pf {
+  @media(max-width: @screen-xs-max) {
+    // Set max-width when < 769, so that word-break functions on Firefox & IE.
+    // Subtract 40px to align edges with content within container-fluid that has left & right 20px margin
+    max-width: calc(~"100% - 40px");
+  }
   top: 28px;
+  .word-break();
   z-index: @zindex-modal + 5;  // Override Patternfly's z-index to keep toasts above modals but below popovers
 
   > div {

dist/origin-web-common.css

@@ -273,8 +273,17 @@ div.hopscotch-bubble .hopscotch-nav-button.prev {
 }
 .toast-notifications-list-pf {
   top: 28px;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  min-width: 0;
   z-index: 1055;
 }
+@media (max-width: 767px) {
+  .toast-notifications-list-pf {
+    max-width: calc(100% - 40px);
+  }
+}
 .toast-notifications-list-pf > div.ng-enter {
   animation: toastSlideIn 0.2s ease-out;
 }

src/styles/_notifications.less

@@ -8,7 +8,13 @@
 }
 
 .toast-notifications-list-pf {
+  @media(max-width: @screen-xs-max) {
+    // Set max-width when < 769, so that word-break functions on Firefox & IE.
+    // Subtract 40px to align edges with content within container-fluid that has left & right 20px margin
+    max-width: calc(~"100% - 40px");
+  }
   top: 28px;
+  .word-break();
   z-index: @zindex-modal + 5;  // Override Patternfly's z-index to keep toasts above modals but below popovers
 
   > div {