Fix some style issues on the controlbox.

builds/templates.js

@@ -52,13 +52,13 @@ this["templates"]["change_status_message"] = function(obj) {
 obj || (obj = {});
 var __t, __p = '', __e = _.escape;
 with (obj) {
-__p += '<form id="set-custom-xmpp-status">\n    <input type="text" class="custom-xmpp-status" ' +
+__p += '<form id="set-custom-xmpp-status">\n    <span class="input-button-group">\n        <input type="text" class="custom-xmpp-status" ' +
 ((__t = (status_message)) == null ? '' : __t) +
-'\n        placeholder="' +
+'\n            placeholder="' +
 ((__t = (label_custom_status)) == null ? '' : __t) +
-'"/>\n    <button type="submit">' +
+'"/>\n        <button type="submit">' +
 ((__t = (label_save)) == null ? '' : __t) +
-'</button>\n</form>\n';
+'</button>\n    </span>\n</form>\n';
 
 }
 return __p
@@ -849,7 +849,7 @@ this["templates"]["roster"] = function(obj) {
 obj || (obj = {});
 var __t, __p = '', __e = _.escape;
 with (obj) {
-__p += '<span class="roster-filter-group">\n    <input style="display: none;" class="roster-filter" placeholder="' +
+__p += '<span class="input-button-group">\n    <input style="display: none;" class="roster-filter" placeholder="' +
 ((__t = (placeholder)) == null ? '' : __t) +
 '">\n    <select style="display: none;" class="filter-type">\n        <option value="contacts">' +
 ((__t = (label_contacts)) == null ? '' : __t) +

css/converse.css

@@ -370,6 +370,11 @@
     padding: 10px 8px 0 8px; }
     #conversejs .toggle-controlbox span {
       color: white; }
+  #conversejs .input-button-group {
+    display: table; }
+  #conversejs .input-button-group button,
+  #conversejs .input-button-group input {
+    display: table-cell; }
   #conversejs #minimized-chats {
     color: white;
     display: none;
@@ -678,8 +683,6 @@
     overflow: hidden;
     /* (jQ addClass:) if input has value: */
     /* (jQ addClass:) if mouse is over the 'x' input area*/ }
-    #conversejs #converse-roster .roster-filter-group {
-      display: table; }
     #conversejs #converse-roster .filter-type {
       display: table-cell;
       font-size: 14px;
@@ -690,7 +693,6 @@
     #conversejs #converse-roster .roster-filter {
       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
       border: 1px solid #999;
-      display: table-cell;
       font-size: 14px;
       height: 25px;
       margin: 0 0 0.5em 6px;
@@ -952,7 +954,7 @@
     width: 100%;
     height: 30px;
     margin: 5px 0 10px 0;
-    padding: 0.5em; }
+    padding-left: 0.5em; }
   #conversejs #converse-register .input-group {
     display: table;
     margin: auto;
@@ -1042,7 +1044,7 @@
           border-bottom: 1px solid #CCC;
           border-top-left-radius: 4px;
           border-top-right-radius: 4px;
-          box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.5);
+          box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
           color: #888;
           display: block;
           font-size: 12px;
@@ -1150,14 +1152,14 @@
     float: left;
     padding: 0; }
     #conversejs #set-custom-xmpp-status input {
-      height: 23px; }
+      height: 26px;
+      width: -webkit-calc(100% - 40px);
+      width: calc(100% - 40px);
+      padding: 0 0 0 0.5em; }
     #conversejs #set-custom-xmpp-status button {
-      height: 23px;
+      height: 26px;
       width: 40px;
-      padding: 1px 2px 1px 1px; }
-  #conversejs .custom-xmpp-status {
-    width: -webkit-calc(100% - 40px);
-    width: calc(100% - 40px); }
+      padding: 1px; }
   #conversejs .chat-textarea-chatbox-selected {
     border: 1px solid #578308;
     margin: 0; }

mockup/index.html

@@ -131,7 +131,7 @@
                     </dd>
                 </dl>
                 <div id="converse-roster">
-                    <span class="roster-filter-group">
+                    <span class="input-button-group">
                         <input class="roster-filter" placeholder="Type to filter">
                         <select class="filter-type">
                             <option value="contacts">Contacts</option>

sass/converse.scss

@@ -289,6 +289,14 @@
     }
   }
 
+  .input-button-group {
+    display: table;
+  }
+  .input-button-group button,
+  .input-button-group input {
+    display: table-cell;
+  }
+
   #minimized-chats {
     color: $inverse-link-color;
     display: none;
@@ -715,9 +723,6 @@
     height: calc(100% - 68px);
     overflow: hidden;
 
-    .roster-filter-group {
-        display: table;
-    }
     .filter-type {
       display: table-cell;
       font-size: $font-size;
@@ -729,7 +734,6 @@
     .roster-filter {
       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
       border: 1px solid #999;
-      display: table-cell;
       font-size: $font-size;
       height: $controlbox-dropdown-height;
       margin: 0 0 0.5em 6px;
@@ -1091,7 +1095,7 @@
     width: 100%;
     height: 30px;
     margin: 5px 0 10px 0;
-    padding: 0.5em;
+    padding-left: 0.5em;
   }
 
   #converse-register {
@@ -1213,7 +1217,7 @@
           border-bottom: 1px solid $border-color;
           border-top-left-radius: 4px;
           border-top-right-radius: 4px;
-          box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.5);
+          box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
           color: #888;
           display: block;
           font-size: 12px;
@@ -1365,17 +1369,16 @@
     float: left;
     padding: 0;
     input {
-      height: $controlbox-dropdown-height - 2px;
+      height: $controlbox-dropdown-height + 1px;
+      @include calc(width, '100% - 40px');
+      padding: 0 0 0 0.5em;
     }
     button {
-      height: $controlbox-dropdown-height - 2px;
+      height: $controlbox-dropdown-height + 1px;
       width: 40px;
-      padding: 1px 2px 1px 1px;
+      padding: 1px;
     }
   }
-  .custom-xmpp-status {
-    @include calc(width, '100% - 40px');
-  }
 
   .chat-textarea-chatbox-selected {
     border: 1px solid #578308;

src/templates/change_status_message.html

@@ -1,5 +1,7 @@
 <form id="set-custom-xmpp-status">
-    <input type="text" class="custom-xmpp-status" {{status_message}}
-        placeholder="{{label_custom_status}}"/>
-    <button type="submit">{{label_save}}</button>
+    <span class="input-button-group">
+        <input type="text" class="custom-xmpp-status" {{status_message}}
+            placeholder="{{label_custom_status}}"/>
+        <button type="submit">{{label_save}}</button>
+    </span>
 </form>

src/templates/roster.html

@@ -1,4 +1,4 @@
-<span class="roster-filter-group">
+<span class="input-button-group">
     <input style="display: none;" class="roster-filter" placeholder="{{placeholder}}">
     <select style="display: none;" class="filter-type">
         <option value="contacts">{{label_contacts}}</option>