Merge pull request #4312 from matrix-org/t3chguy/xsigning/fix_userinfo_e2eicon

Fix alignment of e2e icon in userinfo and expose full displayname in title

res/css/views/right_panel/_UserInfo.scss

@@ -134,12 +134,13 @@ limitations under the License.
         text-align: center;
 
         h2 {
+            display: flex;
             font-size: $font-18px;
             line-height: $font-25px;
             flex: 1;
             justify-content: center;
-            align-items: center;
 
+            span {
                 // limit to 2 lines, show an ellipsis if it overflows
                 // this looks webkit specific but is supported by Firefox 68+
                 display: -webkit-box;
@@ -149,9 +150,12 @@ limitations under the License.
                 overflow: hidden;
                 word-break: break-all;
                 text-overflow: ellipsis;
+            }
 
             .mx_E2EIcon {
-                margin: 5px;
+                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
             }
         }
 

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>
                         { e2eIcon }
+                        <span title={displayName} aria-label={displayName}>
                             { displayName }
+                        </span>
                     </h2>
                 </div>
                 <div>{ member.userId }</div>