From 873ff7fc29e6154d6885d42a88a58cf75be5fa1a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 24 Oct 2018 18:22:57 +0200
Subject: [PATCH] make EntityTile responsive

---
 res/css/views/rooms/_EntityTile.scss     | 28 ++++++++++--------------
 src/components/views/rooms/EntityTile.js |  1 -
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index 031894afde..147c76dad6 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -15,12 +15,19 @@ limitations under the License.
 */
 
 .mx_EntityTile {
-    display: table-row;
-    position: relative;
+    display: flex;
+    align-items: center;
     color: $primary-fg-color;
     cursor: pointer;
 }
 
+.mx_EntityTile:hover {
+    background-image: url('../../img/member_chevron.png');
+    background-position: center right 10px;
+    background-repeat: no-repeat;
+    padding-right: 30px;
+}
+
 .mx_EntityTile_invite {
     display: table-cell;
     vertical-align: middle;
@@ -30,12 +37,10 @@ limitations under the License.
 
 .mx_EntityTile_avatar,
 .mx_GroupRoomTile_avatar {
-    display: table-cell;
     padding-left: 3px;
     padding-right: 12px;
     padding-top: 4px;
     padding-bottom: 4px;
-    vertical-align: middle;
     width: 36px;
     height: 36px;
     position: relative;
@@ -51,32 +56,21 @@ limitations under the License.
 
 .mx_EntityTile_name,
 .mx_GroupRoomTile_name {
-    display: table-cell;
-    vertical-align: middle;
+    flex: 1 1 0;
     overflow: hidden;
     font-size: 14px;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 155px;
 }
 
 .mx_EntityTile_details {
-    display: table-cell;
-    padding-right: 14px;
-    vertical-align: middle;
+    overflow: hidden;
 }
 
 .mx_EntityTile_name_hover {
     font-size: 13px;
 }
 
-.mx_EntityTile_chevron {
-    margin-top: 8px;
-    margin-right: -4px;
-    margin-left: 6px;
-    float: right;
-}
-
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
     color: $primary-fg-color;
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 6b3264d123..851352aa17 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -131,7 +131,6 @@ const EntityTile = React.createClass({
             }
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
                     <EmojiText element="div" className={nameClasses} dir="auto">
                         { name }
                     </EmojiText>