chat client: fix that several status messages don't go into new lines

public/assets/chat/chat.css

@@ -206,30 +206,28 @@
   font-size: 0.9em;
   margin: 1em 0; }
 
-.zammad-chat-message {
-  margin: 0.5em 0; }
+.zammad-chat-status {
+  margin: 1em 0;
+  text-align: center; }
 
-.zammad-chat-status,
+.zammad-chat-message {
+  margin: 0.5em 0;
+  white-space: pre-line;
+  word-wrap: break-word;
+  border-radius: 1em; }
+
+.zammad-chat-status-inner,
 .zammad-chat-message-body {
   padding: 0.5em 1em;
   line-height: 1.4;
-  border-radius: 1em;
   background: #ededed;
   display: inline-block;
   max-width: 70%;
-  white-space: pre-line;
-  word-wrap: break-word;
   box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02); }
 
-.zammad-chat-status {
-  display: inline-block;
-  position: relative;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
-  margin: 1em 0;
-  background: #eee; }
+.zammad-chat-status-inner {
+  background: #eee;
+  border-radius: .5em; }
 
 .zammad-chat-message--customer {
   text-align: right; }

public/assets/chat/chat.js

@@ -1,3 +1,64 @@
+if (!window.zammadChatTemplates) {
+  window.zammadChatTemplates = {};
+}
+window.zammadChatTemplates["agent"] = function (__obj) {
+  if (!__obj) __obj = {};
+  var __out = [], __capture = function(callback) {
+    var out = __out, result;
+    __out = [];
+    callback.call(this);
+    result = __out.join('');
+    __out = out;
+    return __safe(result);
+  }, __sanitize = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else if (typeof value !== 'undefined' && value != null) {
+      return __escape(value);
+    } else {
+      return '';
+    }
+  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
+  __safe = __obj.safe = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else {
+      if (!(typeof value !== 'undefined' && value != null)) value = '';
+      var result = new String(value);
+      result.ecoSafe = true;
+      return result;
+    }
+  };
+  if (!__escape) {
+    __escape = __obj.escape = function(value) {
+      return ('' + value)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    };
+  }
+  (function() {
+    (function() {
+      if (this.agent.avatar) {
+        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
+        __out.push(__sanitize(this.agent.avatar));
+        __out.push('">\n');
+      }
+    
+      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
+    
+      __out.push(__sanitize(this.agent.name));
+    
+      __out.push('</span>\n</span>');
+    
+    }).call(this);
+    
+  }).call(__obj);
+  __obj.safe = __objSafe, __obj.escape = __escape;
+  return __out.join('');
+};
+
 var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
   slice = [].slice,
   extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -1072,67 +1133,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
   return window.ZammadChat = ZammadChat;
 })(window.jQuery, window);
 
-if (!window.zammadChatTemplates) {
-  window.zammadChatTemplates = {};
-}
-window.zammadChatTemplates["agent"] = function (__obj) {
-  if (!__obj) __obj = {};
-  var __out = [], __capture = function(callback) {
-    var out = __out, result;
-    __out = [];
-    callback.call(this);
-    result = __out.join('');
-    __out = out;
-    return __safe(result);
-  }, __sanitize = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else if (typeof value !== 'undefined' && value != null) {
-      return __escape(value);
-    } else {
-      return '';
-    }
-  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
-  __safe = __obj.safe = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else {
-      if (!(typeof value !== 'undefined' && value != null)) value = '';
-      var result = new String(value);
-      result.ecoSafe = true;
-      return result;
-    }
-  };
-  if (!__escape) {
-    __escape = __obj.escape = function(value) {
-      return ('' + value)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-    };
-  }
-  (function() {
-    (function() {
-      if (this.agent.avatar) {
-        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
-        __out.push(__sanitize(this.agent.avatar));
-        __out.push('">\n');
-      }
-    
-      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
-    
-      __out.push(__sanitize(this.agent.name));
-    
-      __out.push('</span>\n</span>');
-    
-    }).call(this);
-    
-  }).call(__obj);
-  __obj.safe = __objSafe, __obj.escape = __escape;
-  return __out.join('');
-};
-
 /*!
  * ----------------------------------------------------------------------------
  * "THE BEER-WARE LICENSE" (Revision 42):
@@ -1542,11 +1542,11 @@ window.zammadChatTemplates["status"] = function (__obj) {
   }
   (function() {
     (function() {
-      __out.push('<div class="zammad-chat-status">');
+      __out.push('<div class="zammad-chat-status">\n  <div class="zammad-chat-status-inner">\n    ');
     
       __out.push(this.status);
     
-      __out.push('</div>');
+      __out.push('\n  </div>\n</div>');
     
     }).call(this);
     

public/assets/chat/chat.scss

@@ -213,33 +213,34 @@
   margin: 1em 0;
 }
 
-.zammad-chat-message {
-  margin: 0.5em 0;
+.zammad-chat-status {
+  margin: 1em 0;
+  text-align: center;
 }
 
-.zammad-chat-status,
+.zammad-chat-message {
+  margin: 0.5em 0;
+  white-space: pre-line;
+  word-wrap: break-word;
+  border-radius: 1em;
+}
+
+.zammad-chat-status-inner,
 .zammad-chat-message-body {
   padding: 0.5em 1em;
   line-height: 1.4;
-  border-radius: 1em;
   background: hsl(0,0%,93%);
   display: inline-block;
   max-width: 70%;
-  white-space: pre-line;
-  word-wrap: break-word;
   box-shadow:
     0 2px rgba(255,255,255,.15) inset,
     0 0 0 1px rgba(0,0,0,.08) inset,
     0 1px rgba(0,0,0,.02);
 }
 
-.zammad-chat-status {
-  display: inline-block;
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
-  margin: 1em 0;
+.zammad-chat-status-inner {
   background: #eee;
+  border-radius: .5em;
 }
 
 .zammad-chat-message--customer {

public/assets/chat/views/status.eco

@@ -1 +1,5 @@
-<div class="zammad-chat-status"><%- @status %></div>
+<div class="zammad-chat-status">
+  <div class="zammad-chat-status-inner">
+    <%- @status %>
+  </div>
+</div>