From 9a51cace34dde5debcf8d76c41f3e89c8cf29210 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 15 Jul 2015 00:31:47 +0100
Subject: [PATCH] fix bad membership list horizontal scrolling

---
 skins/base/css/molecules/RoomTile.css    |  6 +++++-
 skins/base/css/organisms/MemberList.css  | 14 +++++++++-----
 skins/base/views/organisms/MemberList.js | 12 +++++++-----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css
index 16199736..68575551 100644
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@@ -31,7 +31,11 @@ limitations under the License.
     vertical-align: middle;
     width: 32px;
     height: 32px;
-    border-radius: 16px;    
+}
+
+.mx_RoomTile_avatar img {
+    border-radius: 16px;
+    background-color: #dbdbdb;
 }
 
 .mx_RoomTile_name {
diff --git a/skins/base/css/organisms/MemberList.css b/skins/base/css/organisms/MemberList.css
index 20fd9474..fd5cb3e7 100644
--- a/skins/base/css/organisms/MemberList.css
+++ b/skins/base/css/organisms/MemberList.css
@@ -15,26 +15,30 @@ limitations under the License.
 */
 
 .mx_MemberList {
-    width: 100%;
     height: 100%;
     margin-bottom: 100px;
+    padding: 8px;
 }
 
 .mx_MemberList_chevron {
     position: absolute;
     right: 20px;
-    margin-top: -5px;
+    margin-top: -13px;
 }
 
-.mx_MemberList_wrapper {
-    border: 1px solid #d8d8d8;
-    margin: 8px;
+.mx_MemberList_border {
+    border: 1px solid #d8d8d8;    
     overflow-y: scroll;
     height: auto;
     max-height: 75%;
     border-radius: 8px;
     padding: 20px 24px 14px 24px;
+}
+
+.mx_MemberList_wrapper {
+    display: table;
     table-layout: fixed;
+    width: 100%; 
 }
 
 .mx_MemberList h2 {
diff --git a/skins/base/views/organisms/MemberList.js b/skins/base/views/organisms/MemberList.js
index b258978f..26ad0bc1 100644
--- a/skins/base/views/organisms/MemberList.js
+++ b/skins/base/views/organisms/MemberList.js
@@ -45,12 +45,14 @@ module.exports = React.createClass({
                 <div className="mx_MemberList_chevron">
                     <img src="img/chevron.png" width="24" height="13"/>
                 </div>
-                <div className="mx_MemberList_wrapper">
+                <div className="mx_MemberList_border">
                     <h2>Members</h2>
-                    {this.makeMemberTiles()}
-                    <div className="mx_MemberTile">
-                        <div className="mx_MemberTile_avatar"><img src="img/create.png" width="32" height="32" alt="()"/></div>            
-                        <div className="mx_MemberTile_name">Invite</div>
+                    <div className="mx_MemberList_wrapper">
+                        {this.makeMemberTiles()}
+                        <div className="mx_MemberTile">
+                            <div className="mx_MemberTile_avatar"><img src="img/create.png" width="32" height="32" alt="()"/></div>            
+                            <div className="mx_MemberTile_name">Invite</div>
+                        </div>
                     </div>
                 </div>
             </div>