From 237a0ed07121992faecff207d783c0c63634b260 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 23 Jan 2020 16:09:32 +0000
Subject: [PATCH] Make the entire User Info scrollable, sticky close button

---
 res/css/views/right_panel/_UserInfo.scss     | 22 +++++---
 src/components/views/right_panel/UserInfo.js | 57 ++++++++++----------
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index e87fe06a94..d2d9d12c6d 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -23,15 +23,23 @@ limitations under the License.
     font-size: 12px;
 
     .mx_UserInfo_cancel {
-        height: 16px;
-        width: 16px;
-        padding: 10px 0 10px 10px;
         cursor: pointer;
-        mask-image: url('$(res)/img/minimise.svg');
-        mask-repeat: no-repeat;
-        mask-position: 16px center;
-        background-color: $rightpanel-button-color;
         position: absolute;
+        top: 0;
+        border-radius: 4px;
+        background-color: $dark-panel-bg-color;
+        margin: 9px;
+        z-index: 1; // render on top of the right panel
+
+        div {
+            height: 16px;
+            width: 16px;
+            padding: 4px;
+            mask-image: url('$(res)/img/minimise.svg');
+            mask-repeat: no-repeat;
+            mask-position: 7px center;
+            background-color: $rightpanel-button-color;
+        }
     }
 
     h2 {
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index b08f07ace4..31431d56a4 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -1219,10 +1219,9 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
 
     let closeButton;
     if (onClose) {
-        closeButton = <AccessibleButton
-            className="mx_UserInfo_cancel"
-            onClick={onClose}
-            title={_t('Close')} />;
+        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
+            <div />
+        </AccessibleButton>;
     }
 
     const memberDetails = (
@@ -1338,32 +1337,32 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
 
     return (
         <div className="mx_UserInfo" role="tabpanel">
-            { closeButton }
-            { avatarElement }
-
-            <div className="mx_UserInfo_container">
-                <div className="mx_UserInfo_profile">
-                    <div>
-                        <h2 aria-label={displayName}>
-                            { e2eIcon }
-                            { displayName }
-                        </h2>
-                    </div>
-                    <div>{ user.userId }</div>
-                    <div className="mx_UserInfo_profileStatus">
-                        {presenceLabel}
-                        {statusLabel}
-                    </div>
-                </div>
-            </div>
-
-            { memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
-                <div className="mx_UserInfo_memberDetails">
-                    { memberDetails }
-                </div>
-            </div> }
-
             <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
+                { closeButton }
+                { avatarElement }
+
+                <div className="mx_UserInfo_container">
+                    <div className="mx_UserInfo_profile">
+                        <div>
+                            <h2 aria-label={displayName}>
+                                { e2eIcon }
+                                { displayName }
+                            </h2>
+                        </div>
+                        <div>{ user.userId }</div>
+                        <div className="mx_UserInfo_profileStatus">
+                            {presenceLabel}
+                            {statusLabel}
+                        </div>
+                    </div>
+                </div>
+
+                { memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
+                    <div className="mx_UserInfo_memberDetails">
+                        { memberDetails }
+                    </div>
+                </div> }
+
                 { securitySection }
                 <UserOptionsSection
                     devices={devices}