Avoid horizontal scrolling for messages in Firefox

css/converse.css

@@ -10828,7 +10828,8 @@ body.reset {
     white-space: pre-wrap; }
     #conversejs .message.chat-msg .chat-msg__text a {
       word-wrap: break-word;
-      word-break: break-all; }
+      word-break: break-all;
+      display: inline-block; }
     #conversejs .message.chat-msg .chat-msg__text img.emoji {
       height: 1.5em;
       width: 1.5em;
@@ -10865,6 +10866,9 @@ body.reset {
     padding-bottom: 0.25rem;
     display: block; }
     #conversejs .message.chat-msg .chat-msg__heading .chat-msg__author {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
       white-space: nowrap;
       font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
       font-size: 115%; }

dist/converse.js

@@ -79531,13 +79531,13 @@ __p += '**';
  }; ;
 __p +=
 __e(o.username) +
-'\n                ';
+'</span>\n            ';
 o.roles.forEach(function (role) { ;
 __p += ' <span class="badge badge-secondary">' +
 __e(role) +
 '</span> ';
  }); ;
-__p += '\n            </span>\n            ';
+__p += '\n            ';
  if (!o.is_me_message) { ;
 __p += '<time timestamp="' +
 __e(o.isodate) +

sass/_messages.scss

@@ -1,6 +1,5 @@
 #conversejs {
     .message {
-
         .mention {
             font-weight: bold;
         }
@@ -154,6 +153,7 @@
                 a {
                     word-wrap: break-word;
                     word-break: break-all;
+                    display: inline-block;
                 }
                 img {
                     &.emoji {
@@ -209,6 +209,9 @@
                 display: block;
 
                 .chat-msg__author {
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                     white-space: nowrap;
                     font-family: $heading-font; 
                     font-size: 115%;

src/templates/message.html

@@ -6,9 +6,8 @@
     <div class="chat-msg__content {[ if (o.is_me_message) { ]}chat-msg__content--action{[ } ]}">
         <span class="chat-msg__heading">
             {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
-            <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}
-                {[o.roles.forEach(function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
-            </span>
+            <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
+            {[o.roles.forEach(function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
             {[ if (!o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
             {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
         </span>