From d316445fa0b5e326cc3b4293dca1e68827ac752b Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sun, 29 Apr 2018 15:46:46 +0200
Subject: [PATCH] Try to more intelligently break up long messages.

Use break-word in long URLs but not otherwise.
---
 css/converse.css    | 16 ++++++++++------
 css/inverse.css     | 16 ++++++++++------
 sass/_messages.scss | 12 ++++++++----
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 3e7fe9df4..4198bc13d 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -8402,19 +8402,23 @@ body.reset {
       whitespace: nowrap; }
   #conversejs .message.chat-msg .chat-msg-content {
     margin-left: 0.5rem;
-    word-wrap: break-word;
     width: 100%; }
   #conversejs .message.chat-msg.headline .chat-msg-content {
     margin-left: 0; }
   #conversejs .message.chat-msg .chat-msg-text {
     padding: 0;
-    color: #666;
-    word-wrap: break-word;
-    word-break: break-all; }
+    color: #666; }
+    #conversejs .message.chat-msg .chat-msg-text a {
+      word-wrap: break-word;
+      word-break: break-all; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
-  #conversejs .message.chat-msg .chat-msg-media audio {
-    width: 100%; }
+  #conversejs .message.chat-msg .chat-msg-media {
+    margin-top: 0.25rem; }
+    #conversejs .message.chat-msg .chat-msg-media a {
+      word-wrap: break-word; }
+    #conversejs .message.chat-msg .chat-msg-media audio {
+      width: 100%; }
   #conversejs .message.chat-msg .avatar {
     margin-top: 0.5em;
     background: #818479;
diff --git a/css/inverse.css b/css/inverse.css
index 0d5e17cf1..d3199b669 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -8590,19 +8590,23 @@ body {
       whitespace: nowrap; }
   #conversejs .message.chat-msg .chat-msg-content {
     margin-left: 0.5rem;
-    word-wrap: break-word;
     width: 100%; }
   #conversejs .message.chat-msg.headline .chat-msg-content {
     margin-left: 0; }
   #conversejs .message.chat-msg .chat-msg-text {
     padding: 0;
-    color: #666;
-    word-wrap: break-word;
-    word-break: break-all; }
+    color: #666; }
+    #conversejs .message.chat-msg .chat-msg-text a {
+      word-wrap: break-word;
+      word-break: break-all; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
-  #conversejs .message.chat-msg .chat-msg-media audio {
-    width: 100%; }
+  #conversejs .message.chat-msg .chat-msg-media {
+    margin-top: 0.25rem; }
+    #conversejs .message.chat-msg .chat-msg-media a {
+      word-wrap: break-word; }
+    #conversejs .message.chat-msg .chat-msg-media audio {
+      width: 100%; }
   #conversejs .message.chat-msg .avatar {
     margin-top: 0.5em;
     background: #818479;
diff --git a/sass/_messages.scss b/sass/_messages.scss
index f67c97f80..a10a67960 100644
--- a/sass/_messages.scss
+++ b/sass/_messages.scss
@@ -93,7 +93,6 @@
             }
             .chat-msg-content {
                 margin-left: 0.5rem;
-                word-wrap: break-word;
                 width: 100%;
             }
             &.headline {
@@ -105,15 +104,20 @@
             .chat-msg-text {
                 padding: 0;
                 color: $message-text-color;
-                word-wrap: break-word;
-                word-break: break-all;
-
+                a {
+                    word-wrap: break-word;
+                    word-break: break-all;
+                }
                 .emojione {
                     margin-bottom: -6px;
                 }
             }
             
             .chat-msg-media {
+                margin-top: 0.25rem;
+                a {
+                    word-wrap: break-word;
+                }
                 audio {
                     width: 100%;
                 }