message-engine-css

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.html

@@ -23,7 +23,7 @@
                                         <label>{{message.SentBy.Name[0]}}</label>
                                     </div>
                                     <div class="ui-g-12 ui-md-11">
-                                        <div [innerHTML]="message.MessageContent"></div>
+                                        <div class="break-word" [innerHTML]="message.MessageContent"></div>
                                         <div class="attachments">
                                             <a *ngFor="let attachment of message.Attachments"
                                                href="{{apiUrl+attachment.File.URI}}"

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.scss

@@ -2,6 +2,10 @@ a {
     color: rgb(3, 160, 231);
 }
 
+.break-word {
+    word-break: break-all;
+}
+
 ::ng-deep {
     .ui-fileupload-buttonbar {
         padding: 0 !important;
@@ -13,6 +17,12 @@ a {
         }
     }
 
+    .ui-fileupload-content {
+        ul {
+            word-break: break-all;
+        }
+    }
+
     .ui-fileupload-row {
         div:nth-child(n+3) {
             display: none;

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.ts

@@ -271,15 +271,20 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
      * If message content is empty, generate an error message for it.
      */
     IsMessageEmpty(): boolean {
+        const editElement = this.messageEditor.getQuill().container;
+        const editor = editElement.getElementsByClassName('ql-editor');
+
         if (this.showPlainText(this.Message.MessageContent) === '') {
             this.msgService.addErrorMessages(
                 [this.utilsService.getValidationMessage('required', 'Message Content', {})]
             );
             this.messageEditor.getQuill()
                 .focus();
+            editor[0].classList.add('error-block');
 
             return true;
         }
+        editor[0].classList.remove('error-block');
 
         return false;
     }

frontend/angular/src/assets/css/custom.scss

@@ -491,3 +491,7 @@ app-message-engine-applicant-view {
 .h-45 {
     height: 45px !important;
 }
+
+.error-block {
+    border: 1px solid red !important;
+}