From 78b945ed7b0759d37d9f1e840b62e74aace3bbfe Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Thu, 2 Feb 2017 23:16:15 +0000
Subject: [PATCH] CSS tweaks for the embedded demo

---
 css/converse-muc-embedded.css | 12 +++++++++++-
 css/converse.css              | 11 +++++++++--
 sass/_chatbox.scss            |  7 +++++++
 sass/_muc_embedded.scss       | 10 ++++++++++
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/css/converse-muc-embedded.css b/css/converse-muc-embedded.css
index ecfdfb031..383503368 100644
--- a/css/converse-muc-embedded.css
+++ b/css/converse-muc-embedded.css
@@ -5,10 +5,17 @@
  */
 /* $font-path: "../fonticons/fonts/" !default; */
 #converse-embedded-chat {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   bottom: auto;
   right: auto;
   position: relative;
   width: 100%; }
+  #converse-embedded-chat *, #converse-embedded-chat *:before, #converse-embedded-chat *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
   #converse-embedded-chat .chatroom {
     width: auto; }
   #converse-embedded-chat .flyout {
@@ -26,10 +33,13 @@
     display: none; }
   #converse-embedded-chat .chatroom .box-flyout {
     min-width: auto;
-    width: 100%; }
+    width: 100%;
+    height: 90vh; }
     #converse-embedded-chat .chatroom .box-flyout .chat-body {
       height: -webkit-calc(100% - 55px);
       height: calc(100% - 55px); }
+    #converse-embedded-chat .chatroom .box-flyout .chat-content {
+      height: calc(100% - 97px); }
     #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container {
       height: auto;
       position: relative; }
diff --git a/css/converse.css b/css/converse.css
index 02bff5e77..032602d8d 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1656,6 +1656,7 @@
       resize: none; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
+      box-sizing: border-box;
       font-size: 14px;
       margin: 0;
       padding: 5px;
@@ -1664,7 +1665,10 @@
       background-color: #FFF5EE; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
-        color: #2A9D8F; }
+        font-size: 14px;
+        color: #2A9D8F;
+        text-decoration: none;
+        text-shadow: none; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
@@ -1720,6 +1724,9 @@
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
             color: #8f2831; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
+        margin-left: 0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
         color: #2A9D8F;
@@ -2346,7 +2353,7 @@
         border: 0;
         color: #818479;
         font-size: 14px;
-        height: 289px;
+        height: 100%;
         height: -webkit-calc(100% - 55px);
         height: calc(100% - 55px);
         overflow-y: auto;
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 0ebdb2d83..9d44c4017 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -256,6 +256,7 @@
                 resize: none;
             }
             .chat-toolbar {
+                box-sizing: border-box;
                 font-size: $font-size;
                 margin: 0;
                 padding: 5px;
@@ -263,7 +264,10 @@
                 display: block;
                 background-color: $toolbar-color;
                 a {
+                    font-size: $font-size;
                     color: $link-color;
+                    text-decoration: none;
+                    text-shadow: none;
                 }
                 .chat-toolbar-text {
                     font-size: 12px;
@@ -315,6 +319,9 @@
                         }
                     }
                 }
+                li {
+                    margin-left: 0;
+                }
                 .toggle-smiley {
                     color: $link-color;
                     padding-left: 5px;
diff --git a/sass/_muc_embedded.scss b/sass/_muc_embedded.scss
index 39fe4760f..bad1201f3 100644
--- a/sass/_muc_embedded.scss
+++ b/sass/_muc_embedded.scss
@@ -1,6 +1,12 @@
 @import "bourbon";
 @import "variables";
 #converse-embedded-chat {
+
+    @include box-sizing(border-box);
+    *, *:before, *:after {
+        @include box-sizing(border-box);
+    }
+
     bottom: auto;
     right: auto;
     position: relative;
@@ -32,9 +38,13 @@
         .box-flyout {
             min-width: auto;
             width: 100%;
+            height: 90vh;
             .chat-body {
                 @include calc(height, '100% - #{$chat-head-height}');
             }
+            .chat-content {
+                height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px});
+            }
             .chatroom-body {
                 .chatroom-form-container {
                     height: auto;