From 8ffd9e24a3fdc16672555ee2ab512c12e6a8b4bb Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 18 Jul 2017 08:56:25 +0200
Subject: [PATCH] css: fix alignment issues for messages with emojis in
 converse

---
 css/converse.css              | 35 ++++++++++++++++++++++++----------
 css/inverse.css               | 25 ++++++++++++------------
 sass/_chatbox.scss            | 36 +++++++++++++++++------------------
 sass/converse/_chatbox.scss   | 17 +++++++++++++++++
 sass/converse/_variables.scss |  1 +
 sass/inverse/_chatbox.scss    |  4 +---
 6 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index d4b5296a1..459034122 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1583,25 +1583,27 @@
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
-      overflow: auto;
-      margin: 0.3em; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+      overflow: auto; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
         font-weight: bold;
         white-space: nowrap;
         float: left;
         text-overflow: ellipsis;
         overflow: hidden; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
         color: #E77051; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
         color: #578EA9; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
         max-width: 100%;
         word-wrap: break-word; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
+        #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
+          margin-bottom: -6px; }
     #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
     #conversejs .chatbox .chat-body .delayed .chat-msg-them {
       color: #FB5D50; }
@@ -1857,6 +1859,19 @@
     #conversejs .chat-head {
       border-top-left-radius: 0;
       border-top-right-radius: 0; } }
+#converse-embedded-chat .chatbox .chat-body .chat-message,
+#conversejs .chatbox .chat-body .chat-message {
+  margin: 0.3em;
+  line-height: 20px; }
+  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
+  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
+    line-height: 20px; }
+  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
+  #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
+    line-height: 20px; }
+    #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
+    #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
+      margin-bottom: -5px; }
 #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
 #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
   width: 100%; }
diff --git a/css/inverse.css b/css/inverse.css
index df072d209..c961bddc3 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -1629,25 +1629,27 @@ body {
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
-      overflow: auto;
-      margin: 0.3em; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+      overflow: auto; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
         font-weight: bold;
         white-space: nowrap;
         float: left;
         text-overflow: ellipsis;
         overflow: hidden; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
         color: #E77051; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
         color: #578EA9; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
-      #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
+      #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
         max-width: 100%;
         word-wrap: break-word; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
+        #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
+          margin-bottom: -6px; }
     #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
     #conversejs .chatbox .chat-body .delayed .chat-msg-them {
       color: #FB5D50; }
@@ -1925,14 +1927,13 @@ body {
     border-top-left-radius: 7px;
     border-top-right-radius: 7px; }
     #conversejs .chatbox .chat-body .chat-message {
+      line-height: 22px;
       font-size: 14px;
       margin: 0.5em 0; }
       #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
         line-height: 22px; }
       #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
         line-height: 22px; }
-        #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
-          margin-bottom: -6px; }
   #conversejs .chatbox .chat-content {
     padding: 0 1em 1em 1em;
     border-top-left-radius: 7px;
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 0d6c7879e..3c8bec18d 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -158,24 +158,24 @@
             }
             .chat-message {
                 overflow: auto; // Ensures that content stays inside
-                margin: 0.3em;
-                span {
-                    &.chat-msg-author {
-                        font-weight: bold;
-                        white-space: nowrap;
-                        float: left;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                    }
-                    &.chat-msg-them {
-                        color: $message-them-color;
-                    }
-                    &.chat-msg-me {
-                        color: $link-color;
-                    }
-                    &.chat-msg-content {
-                        max-width: 100%;
-                        word-wrap: break-word;
+                .chat-msg-author {
+                    font-weight: bold;
+                    white-space: nowrap;
+                    float: left;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .chat-msg-them {
+                    color: $message-them-color;
+                }
+                .chat-msg-me {
+                    color: $link-color;
+                }
+                .chat-msg-content {
+                    max-width: 100%;
+                    word-wrap: break-word;
+                    .emojione {
+                        margin-bottom: -6px;
                     }
                 }
             }
diff --git a/sass/converse/_chatbox.scss b/sass/converse/_chatbox.scss
index d4c7ba5de..a6c6cdacc 100644
--- a/sass/converse/_chatbox.scss
+++ b/sass/converse/_chatbox.scss
@@ -12,6 +12,23 @@
             border-top-right-radius: 0;
         }
     }
+    .chatbox {
+        .chat-body {
+            .chat-message {
+                margin: 0.3em;
+                line-height: $line-height-large;
+                .chat-msg-author {
+                    line-height: $line-height-large;
+                }
+                .chat-msg-content {
+                    line-height: $line-height-large;
+                    .emojione {
+                        margin-bottom: -5px;
+                    }
+                }
+            }
+        }
+    }
     .chatbox {
         form.sendXMPPMessage {
             .chat-toolbar {
diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss
index 9c608675f..2d9963d74 100644
--- a/sass/converse/_variables.scss
+++ b/sass/converse/_variables.scss
@@ -104,6 +104,7 @@ $emoji-picker-height: 100px !default;
 
 $line-height-small:  14px !default;
 $line-height:  16px !default;
+$line-height-large:  20px !default;
 
 $controlbox-width: 200px !default;
 $chat-width: 200px !default;
diff --git a/sass/inverse/_chatbox.scss b/sass/inverse/_chatbox.scss
index d26396a51..a40598cc1 100644
--- a/sass/inverse/_chatbox.scss
+++ b/sass/inverse/_chatbox.scss
@@ -43,6 +43,7 @@
             border-top-right-radius: $chatbox-border-radius;
 
             .chat-message {
+                line-height: $line-height;
                 font-size: $font-size-small;
                 margin: 0.5em 0;
                 .chat-msg-author {
@@ -50,9 +51,6 @@
                 }
                 .chat-msg-content {
                     line-height: $line-height;
-                    .emojione {
-                        margin-bottom: -6px;
-                    }
                 }
             }
         }