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 =