Fix word break in side messages

src/app/messages/messages.component.html

@@ -10,7 +10,7 @@
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
       <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
     </div>
-    <div [innerHtml]="message.message"></div>
+    <div class="tfw-grid-message-body" [innerHtml]="message.message"></div>
   </div>
   <div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
       <div class="jumping-circle" id="jc1"></div>

src/app/messages/messages.component.scss

@@ -2,6 +2,7 @@
 // All Rights Reserved. See LICENSE file for details.
 
 @import "../../assets/scss/variables.scss";
+@import "../../assets/scss/mixins/layout";
 
 .tfw-next-button {
   text-align: center;
@@ -84,3 +85,7 @@
     opacity: 0.37;
   }
 }
+
+.tfw-grid-message-body {
+  @include word-break()
+}

src/assets/scss/mixins/_layout.scss

@@ -144,3 +144,11 @@ $layouts: (
     min-height: #{$rows-count / $grid-rows-count * 100}vh;
   }
 }
+
+@mixin word-break() {
+  /* For Firefox */
+  white-space: pre-wrap;
+  word-break: break-all;
+  /* For Chrome and IE */
+  word-wrap: break-word;
+}