paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

group-settings: Fix how long names are handled in groups UI.

Browse Source 
This commit fixes code to correctly show the long group
names by clipping them and showing ellipsis in group rows
in left panel and in the header shown in right section.

Group names are handled in a different way than stream
names because we need to show deactivated icons as well
for stream names.
This commit is contained in:
Sahil Batra
2025-07-03 15:30:04 +05:30
committed by Tim Abbott
parent 8e0ba8cccf
commit e66431f128
2 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/styles/subscriptions.css
View File

@@ -435,6 +435,14 @@ h4.user_group_setting_subsection_title {
}
}
}
.user-group-info-title {
margin-left: 5px;
}
.deactivated-user-group-icon-right {
margin-right: 5px;
}
}
}
@@ -679,7 +687,7 @@ h4.user_group_setting_subsection_title {
width: 100%;
}
.left .group-name .fa-ban,
.left .group-name-wrapper .fa-ban,
.right .group-name .fa-ban {
font-size: 0.8em;
opacity: 0.6;
@@ -690,7 +698,7 @@ h4.user_group_setting_subsection_title {
opacity: 0.6;
}
.left .group-name,
.left .group-name-wrapper,
.right .group-name {
display: flex;
gap: 3px;
@@ -817,9 +825,18 @@ h4.user_group_setting_subsection_title {
}
}
.sub-info-box {
width: calc(100% - 90px);
}
.group-info-box {
/* 41px = width of checkmark (25px) + right margin for checkmark (12px)
+ right margin for this element (4px) */
width: calc(100% - 41px);
}
.sub-info-box,
.group-info-box {
width: calc(100% - 90px);
margin-right: 4px;
.top-bar,
@@ -829,12 +846,20 @@ h4.user_group_setting_subsection_title {
position: relative;
}
.top-bar .group-name-wrapper {
overflow: hidden;
}
.top-bar .stream-name,
.top-bar .group-name-wrapper,
.top-bar .group-name,
.bottom-bar .description {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-bar .stream-name,
.bottom-bar .description {
margin-right: 12px;
}
@@ -850,8 +875,7 @@ h4.user_group_setting_subsection_title {
margin-right: 5px;
}
.top-bar .stream-name,
.top-bar .group-name-wrapper {
.top-bar .stream-name {
font-weight: 600;
}
@@ -1504,10 +1528,14 @@ div.settings-radio-input-parent {
}
}
.selected-stream-title {
.selected-stream-title,
.user-group-info-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.selected-stream-title {
display: block;
margin: auto;
}

3
web/templates/user_group_settings/browse_user_groups_list_item.hbs
View File

@@ -76,7 +76,8 @@
{{/if}}
<div class="group-info-box">
<div class="top-bar">
<div class="group-name">{{name}}
<div class="group-name-wrapper">
<div class="group-name">{{name}}</div>
{{#if deactivated}}
<i class="fa fa-ban deactivated-user-icon"></i>
{{/if}}