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 committed by Tim Abbott
parent 0ca5d11670
commit 8efa3965fd
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}}