Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Fix long name overflow in user profile modal. 

Set width of the heading tag displaying user profile name heading, which
doesn't let the edit button get pushed off the user profile modal.

Ellipsis property is applied to user profile name on text overflow.

Fixes: #23781.
This commit is contained in:
SameepAher 2023-01-27 11:48:43 +05:30
parent 6cf1d9fa20
commit 9e4aa19acf
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/styles/modal.css
View File

@ -50,6 +50,7 @@
font-size: 1.375rem;
font-weight: 600;
line-height: 1.25;
display: flex;
/* help_link_widget margin for the fa-circle-o. */
.help_link_widget {
@ -57,6 +58,17 @@
}
}
.user_profile_name_heading {
padding-right: 1rem;
max-width: 80%;
.user_profile_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.modal__close {
&::before {
content: "\2715";

4
static/templates/user_profile_modal.hbs
View File

@ -5,8 +5,8 @@
<div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
<span class="{{user_circle_class}} user_circle user_profile_presence"></span>
</div>
<h1 class="modal__title" id="name">
{{full_name}}
<h1 class="modal__title user_profile_name_heading" id="name">
<span class="user_profile_name">{{full_name}}</span>
{{#if is_bot}}
<i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
{{/if}}