Make the entire User Info scrollable, sticky close button

res/css/views/right_panel/_UserInfo.scss

@@ -23,15 +23,23 @@ limitations under the License.
     font-size: 12px;
 
     .mx_UserInfo_cancel {
+        cursor: pointer;
+        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: 10px 0 10px 10px;
+            padding: 4px;
-        cursor: pointer;
             mask-image: url('$(res)/img/minimise.svg');
             mask-repeat: no-repeat;
-        mask-position: 16px center;
+            mask-position: 7px center;
             background-color: $rightpanel-button-color;
-        position: absolute;
+        }
     }
 
     h2 {

src/components/views/right_panel/UserInfo.js

@@ -1219,10 +1219,9 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
 
     let closeButton;
     if (onClose) {
-        closeButton = <AccessibleButton
+        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
-            className="mx_UserInfo_cancel"
+            <div />
-            onClick={onClose}
+        </AccessibleButton>;
-            title={_t('Close')} />;
     }
 
     const memberDetails = (
@@ -1338,6 +1337,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
 
     return (
         <div className="mx_UserInfo" role="tabpanel">
+            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
                 { closeButton }
                 { avatarElement }
 
@@ -1363,7 +1363,6 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
                     </div>
                 </div> }
 
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
                 { securitySection }
                 <UserOptionsSection
                     devices={devices}