From ffa8661799da6ab127f1fd0ed7a55a8c48c9399f Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 20 Jun 2016 19:25:57 +0000
Subject: [PATCH] Update chatroom css

---
 css/converse.css     | 13 +++++++------
 docs/CHANGES.md      |  6 +++++-
 sass/_chatrooms.scss | 17 +++++++++--------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 632463d11..ec3b108aa 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1992,10 +1992,14 @@
       background-color: white;
       border-top: 0;
       width: 100%; }
+      #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
+        font-weight: bold; }
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
+        color: #1A9707; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
         height: 100%;
-        max-width: 70%;
+        width: 70%;
         float: left;
         min-width: 200px; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
@@ -2007,17 +2011,14 @@
           min-width: 100%; }
           #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
             min-width: 100%; }
-      #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
-        font-weight: bold; }
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
-        color: #1A9707; }
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
+        float: right;
         vertical-align: top;
         background-color: white;
         overflow: hidden;
         border-left: 1px solid #818479;
         border-bottom-right-radius: 4px;
-        min-width: 30%;
+        width: 30%;
         height: 100%; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants.hidden {
           display: none; }
diff --git a/docs/CHANGES.md b/docs/CHANGES.md
index 534c44637..336f587c9 100755
--- a/docs/CHANGES.md
+++ b/docs/CHANGES.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.4 (Unreleased)
+
+- Restrict occupants sidebar to 30% chatroom width. [jcbrand]
+
 ## 1.0.3 (2016-06-20)
 
 - Update the plugin architecture to allow plugins to have optional dependencies [jcbrand]
@@ -16,7 +20,7 @@
 - Add new event [pluginsInitialized](https://conversejs.org/docs/html/development.html#pluginsInitialized)
 - #553 Add processing hints to OTR messages [jcbrand]
 - #650 Don't ignore incoming messages with same JID as current user (might be MAM archived) [jcbrand]
-- #656 online users count in minimized chat window on initialization corrected
+- #656 online users count in minimized chat window on initialization corrected [amanzur]
 
 ## 1.0.2 (2016-05-24)
 
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index 54e0ff2d4..f44910b65 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -43,11 +43,17 @@
                 background-color: white;
                 border-top: 0;
                 width: 100%;
+                .mentioned {
+                    font-weight: bold;
+                }
+                .chat-msg-room {
+                    color: $message-them-color;
+                }
 
                 .chat-area {
                     word-wrap: break-word; 
                     height: 100%;
-                    max-width: 70%;
+                    width: 70%;
                     float: left;
                     min-width: $chat-width;
                     .new-msgs-indicator {
@@ -65,19 +71,14 @@
                         }
                     }
                 }
-                .mentioned {
-                    font-weight: bold;
-                }
-                .chat-msg-room {
-                    color: $message-them-color;
-                }
                 .occupants {
+                    float: right;
                     vertical-align: top;
                     background-color: white;
                     overflow: hidden;
                     border-left: 1px solid $text-color;
                     border-bottom-right-radius: $chatbox-border-radius;
-                    min-width: 30%;
+                    width: 30%;
                     height: 100%;
                     &.hidden {
                         display: none;