paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Handle long names better in susbcribers and members list.

Browse Source 
This commit updates the subscribers and group members table CSS to
use fixed layout. This helps in having user pill take the width if
available and we can show more characters.

Previously the width of name in user pill was set to have a max
width of 165px which meant the there was some empty unused space in
the rows especially on narrow screens when email column was hidden.

Fixes #35157.
This commit is contained in:
Sahil Batra
2025-07-24 22:17:02 +05:30
committed by Tim Abbott
parent 1d7b9ea83c
commit 34cb0034e1
10 changed files with 77 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/styles/popovers.css
View File

@@ -666,6 +666,11 @@ ul.popover-group-menu-member-list {
}
}
}
.remove-button-wrapper {
display: flex;
justify-content: flex-end;
}
}
}
@@ -699,11 +704,6 @@ ul.popover-group-menu-member-list {
}
}
.remove-button-wrapper {
display: flex;
justify-content: flex-end;
}
@media (width < $md_min) {
.popover-flex {
position: absolute;

60
web/styles/subscriptions.css
View File

@@ -1532,3 +1532,63 @@ div.settings-radio-input-parent {
display: block;
margin: auto;
}
#stream_members_list,
#user_group_settings .member-list,
#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
table-layout: fixed;
width: 100%;
th,
td {
box-sizing: border-box;
}
.panel_user_list {
width: 50%;
.pill-container {
max-width: 100%;
.pill-value {
/* This is needed to unset the max-width value of 165px
set for user pills in other tables. */
max-width: unset;
}
}
}
}
#stream_members_list,
#user_group_settings .member-list {
.remove-button-column {
width: 3em;
}
.settings-email-column {
width: calc(50% - 3em);
}
}
#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
.action-column {
width: 6em;
}
.settings-email-column {
width: calc(50% - 6em);
}
}
@media (width < $lg_min) {
#stream_members_list,
#user_group_settings .member-list,
#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
.panel_user_list {
width: auto;
}
}
}