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,24 +134,28 @@ 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;
 
-            // 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-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 }
-                        { displayName }
+                        <span title={displayName} aria-label={displayName}>
+                            { displayName }
+                        </span>
                     </h2>
                 </div>
                 <div>{ member.userId }</div>