From eb901441cdda2c77c5cc377892ddc348b9cb3dc5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 31 Mar 2020 16:14:18 +0100
Subject: [PATCH 1/3] Fix alignment of e2e icon in userinfo and expose full
 displayname in title

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/right_panel/_UserInfo.scss     | 23 +++++++++++---------
 src/components/views/right_panel/UserInfo.js |  6 +++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 0e4b1bda9e..d2753f5825 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -134,24 +134,27 @@ limitations under the License.
         text-align: center;
 
         h2 {
+            display: flex;
             font-size: 18px;
             line-height: 25px;
             flex: 1;
             justify-content: center;
-            align-items: center;
 
-            // limit to 2 lines, show an ellipsis if it overflows
-            // this looks webkit specific but is supported by Firefox 68+
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
+            span {
+                // limit to 2 lines, show an ellipsis if it overflows
+                // this looks webkit specific but is supported by Firefox 68+
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
 
-            overflow: hidden;
-            word-break: break-all;
-            text-overflow: ellipsis;
+                overflow: hidden;
+                word-break: break-all;
+                text-overflow: ellipsis;
+            }
 
             .mx_E2EIcon {
-                margin: 5px;
+                margin: 4px 4px 4px 0; // no left-margin to improve visual centering
+                min-width: 18px; // convince flexbox to not collapse it
             }
         }
 
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index a2081dc9e4..82e410b361 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -1444,9 +1444,11 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
         <div className="mx_UserInfo_container mx_UserInfo_separator">
             <div className="mx_UserInfo_profile">
                 <div>
-                    <h2 aria-label={displayName}>
+                    <h2 title={displayName} aria-label={displayName}>
                         { e2eIcon }
-                        { displayName }
+                        <span>
+                            { displayName }
+                        </span>
                     </h2>
                 </div>
                 <div>{ member.userId }</div>

From 430a9ef9484caaff26fc4f20ccf8d7e1f0b0e023 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 1 Apr 2020 15:09:19 +0100
Subject: [PATCH 2/3] tweak e2e icon margins

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/right_panel/_UserInfo.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index d2753f5825..1d1374cf1f 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -153,7 +153,8 @@ limitations under the License.
             }
 
             .mx_E2EIcon {
-                margin: 4px 4px 4px 0; // no left-margin to improve visual centering
+                margin-top: 3px; // visual vertical centering to the top line of text
+                margin-right: 4px; // margin from displyname
                 min-width: 18px; // convince flexbox to not collapse it
             }
         }

From 0d8fd83e4d8622e59142b2b05d4e8389cf15dffd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 1 Apr 2020 17:16:28 +0100
Subject: [PATCH 3/3] move aria-label and title so that it doesn't wrap the e2e
 icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/right_panel/UserInfo.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index 82e410b361..abe54b355e 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -1444,9 +1444,9 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
         <div className="mx_UserInfo_container mx_UserInfo_separator">
             <div className="mx_UserInfo_profile">
                 <div>
-                    <h2 title={displayName} aria-label={displayName}>
+                    <h2>
                         { e2eIcon }
-                        <span>
+                        <span title={displayName} aria-label={displayName}>
                             { displayName }
                         </span>
                     </h2>