From 3fb89a81bce1aca230421b89fa33e7cdd6c2ef93 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Sat, 26 Jun 2021 14:51:01 +0530
Subject: [PATCH] Add some initial styling

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 src/platform/web/ui/css/right-panel.css         |  4 ++++
 .../web/ui/css/themes/element/theme.css         | 17 +++++++++++++++++
 .../web/ui/session/rightpanel/MemberTileView.js |  5 ++++-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css
index 8d6fd3b1..c083bd20 100644
--- a/src/platform/web/ui/css/right-panel.css
+++ b/src/platform/web/ui/css/right-panel.css
@@ -38,3 +38,7 @@ ul.MemberListView {
     overflow: scroll;
     height: 100vh;
 }
+
+.MemberTileView {
+    display: flex;
+}
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 885383d7..3108ca27 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -865,3 +865,20 @@ button.link {
 .RoomDetailsView .close {
     background-image: url("./icons/clear.svg");
 }
+
+/* Memberlist Panel */
+
+.MemberTileView {
+    margin-top: 8px;
+}
+
+.MemberTileView .avatar {
+    margin-right: 8px;
+}
+
+.MemberTileView_name {
+    text-overflow: ellipsis;
+    overflow: clip;
+    width: 184px;
+    white-space: nowrap;
+}
diff --git a/src/platform/web/ui/session/rightpanel/MemberTileView.js b/src/platform/web/ui/session/rightpanel/MemberTileView.js
index f2b5d499..da0d5d23 100644
--- a/src/platform/web/ui/session/rightpanel/MemberTileView.js
+++ b/src/platform/web/ui/session/rightpanel/MemberTileView.js
@@ -3,6 +3,9 @@ import {AvatarView} from "../../avatar.js";
 
 export class MemberTileView extends TemplateView {
     render(t, vm) {
-        return t.div([t.view(new AvatarView(vm, 32)), vm => vm.name]);
+        return t.div({ className: "MemberTileView" }, [
+            t.view(new AvatarView(vm, 32)),
+            t.div({ className: "MemberTileView_name" }, (vm) => vm.name),
+        ]);
     }
 }