From bf524424c23ed998c7f216704901afb86ee50acb Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 2 Nov 2015 00:28:00 +0000
Subject: [PATCH] CSS fixes.

- Pending contacts were not aligned to action icons next to them.
- Invite contacts search box went out of bounds on FF
---
 css/converse.css     | 15 ++++++++-------
 sass/_chatrooms.scss |  6 +++---
 sass/_roster.scss    | 10 ++++++----
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index f336944aa..9a29c8117 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1811,7 +1811,11 @@
           width: 80%; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions {
         margin-left: 0.5em;
+        margin-bottom: 0.3em;
         float: right; }
+      #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
+        width: 69%;
+        padding: 0; }
       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
         font-size: 16px;
         float: left;
@@ -1826,7 +1830,8 @@
         white-space: nowrap;
         text-overflow: ellipsis; }
       #conversejs #converse-roster .roster-contacts dd span {
-        padding: 0 0.5em 0 0; }
+        padding: 0 0.5em 0 0;
+        height: 100%; }
       #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
         margin-left: 5px; }
       #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
@@ -1837,9 +1842,6 @@
         color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
     width: 80%; }
-  #conversejs #converse-roster span.req-contact-name {
-    width: 69%;
-    padding: 0; }
 
 #conversejs .chat-head-chatroom {
   background-color: #E76F51; }
@@ -1881,8 +1883,7 @@
         height: 100%;
         min-width: 200px; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          margin-top: 0.5em;
-          padding: 0.5em 0.5em 0 0.5em; }
+          padding: 0 0.5em 0 0.5em; }
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
@@ -1935,7 +1936,7 @@
     margin: 0.3em; }
     #conversejs .chatroom .room-invite .invited-contact {
       margin: -1px 0 0 -1px;
-      width: 100px;
+      width: 100%;
       border: 1px solid #999; }
       #conversejs .chatroom .room-invite .invited-contact.tt-input {
         width: 100%;
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index 9a3b04dc7..c58d7eff5 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -43,8 +43,8 @@
                     height: 100%;
                     min-width: $chat-width;
                     .chat-content {
-                        margin-top: 0.5em;
-                        padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
+                        // There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
+                        padding: 0 0.5em 0 0.5em;
                     }
                 }
                 .mentioned {
@@ -112,7 +112,7 @@
             margin: 0.3em;
             .invited-contact {
                 margin: -1px 0 0 -1px;
-                width: 100px;
+                width: 100%;
                 border: 1px solid #999;
                 &.tt-input {
                     width: 100%;
diff --git a/sass/_roster.scss b/sass/_roster.scss
index 545b64daf..0016fa40c 100644
--- a/sass/_roster.scss
+++ b/sass/_roster.scss
@@ -97,8 +97,13 @@
             &.requesting-xmpp-contact {
                 &.request-actions {
                     margin-left: 0.5em;
+                    margin-bottom: 0.3em;
                     float: right;
                 }
+                .req-contact-name {
+                    width: 69%;
+                    padding: 0;
+                }
             }
             &.current-xmpp-contact span {
                 font-size: 16px;
@@ -118,6 +123,7 @@
             }
             span {
                 padding: 0 0.5em 0 0;
+                height: 100%;
             }
             a {
                 &.decline-xmpp-request {
@@ -137,9 +143,5 @@
         &.pending-contact-name {
             width: 80%;
         }
-        &.req-contact-name {
-            width: 69%;
-            padding: 0;
-        }
     }
 }