Some CSS fixes.

* Make sure that minimized chats appear behind on mobile.
* Enable highlighting text (which for some reason is transparent).

css/converse.css

@@ -42,6 +42,8 @@
   box-sizing: border-box;
   /* @group Tabs */
   /* status dropdown styles */ }
+  #conversejs ::selection {
+    background-color: #E3C9C1; }
   #conversejs *, #conversejs *:before, #conversejs *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -460,9 +462,6 @@
     background-color: #176679;
     border-right: 1px solid #176679;
     border-left: 1px solid #176679; }
-  #conversejs .chat-message span::selection,
-  #conversejs .chat-message::selection {
-    background-color: darkgrey; }
   #conversejs .chat-content {
     position: relative;
     padding: 8px;
@@ -827,6 +826,7 @@
       #conversejs .chatbox {
         width: 100%; } }
     #conversejs .chatbox .box-flyout {
+      z-index: 1;
       width: 200px; }
       @media screen and (max-width: 480px) {
         #conversejs .chatbox .box-flyout {
@@ -1072,8 +1072,11 @@
     margin: 0;
     padding: 0;
     position: relative;
-    width: 200px;
-    height: 82px; }
+    height: 82px;
+    width: 200px; }
+    @media screen and (max-width: 480px) {
+      #conversejs form.sendXMPPMessage {
+        width: 100%; } }
     #conversejs form.sendXMPPMessage .chat-textarea {
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;

sass/converse.scss

@@ -33,7 +33,11 @@
 #conversejs {
   @import "../bourbon/bourbon";
   @import "variables";
-  
+
+  ::selection {
+    background-color: $highlight-color;
+  }
+
   color: $text-color;
   font-size: $font-size;
   bottom: 0;
@@ -404,11 +408,6 @@
     border-left: 1px solid #176679;
   }
 
-  .chat-message span::selection,
-  .chat-message::selection {
-    background-color: darkgrey;
-  }
-
   .chat-content {
     position: relative;
     padding: 8px;
@@ -922,6 +921,7 @@
         width: $mobile-chat-width;
     }
     .box-flyout {
+      z-index: 1;
       width: $chat-width;
         @media screen and (max-width: $mobile_landscape_length) {
             width: $mobile-chat-width;
@@ -1253,8 +1253,11 @@
     margin: 0;
     padding: 0;
     position: relative;
-    width: $chat-width;
     height: #{$chat-textarea-height + $toolbar-height};
+    width: $chat-width;
+    @media screen and (max-width: $mobile_landscape_length) {
+        width: 100%;
+    }
     .chat-textarea {
       @include border-bottom-radius(4px);
       border: 0;