OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-03-31 16:14:18 +01:00
parent 9ed08e76f8
commit eb901441cd
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
res/css/views/right_panel/_UserInfo.scss
View File

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

6
src/components/views/right_panel/UserInfo.js
View File

@ -1444,9 +1444,11 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
<div className="mx_UserInfo_container mx_UserInfo_separator"> <div className="mx_UserInfo_container mx_UserInfo_separator">
<div className="mx_UserInfo_profile"> <div className="mx_UserInfo_profile">
<div> <div>
<h2 aria-label={displayName}> <h2 title={displayName} aria-label={displayName}>
{ e2eIcon } { e2eIcon }
{ displayName } <span>
{ displayName }
</span>
</h2> </h2>
</div> </div>
<div>{ member.userId }</div> <div>{ member.userId }</div>