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

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.
2025-10-23 04:52:12 +00:00 · 2025-07-24 22:17:02 +05:30
parent 1d7b9ea83c
commit 34cb0034e1
10 changed files with 77 additions and 17 deletions
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -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;
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -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;
+        }
+    }
+}
--- a/web/templates/stream_settings/new_stream_user.hbs
+++ b/web/templates/stream_settings/new_stream_user.hbs
@@ -7,7 +7,7 @@
    {{else}}
        <td class="hidden-subscriber-email {{#if soft_removed}} strikethrough {{/if}}">{{t "(hidden)"}}</td>
    {{/if}}
-    <td>
+    <td class="action-column">
        {{#if soft_removed}}
            {{> ../components/action_button custom_classes="undo_soft_removed_potential_subscriber" label=(t "Add") attention="quiet" intent="neutral" aria-label=(t "Add") }}
        {{else}}
--- a/web/templates/stream_settings/new_stream_users.hbs
+++ b/web/templates/stream_settings/new_stream_users.hbs
@@ -17,13 +17,13 @@
    <div class="subscriber_list_container" data-simplebar data-simplebar-tab-index="-1">
        <table class="subscriber-list table table-striped">
            <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                <th class="panel_user_list" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
                </th>
                <th class="settings-email-column" data-sort="email">{{t "Email" }}
                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
                </th>
-                <th>{{t "Action" }}</th>
+                <th class="action-column">{{t "Action" }}</th>
            </thead>
            <tbody id="create_stream_subscribers" class="subscriber_table" data-empty="{{t 'This channel has no subscribers.' }}" data-search-results-empty="{{t 'No channel subscribers match your current filter.'}}"></tbody>
        </table>
--- a/web/templates/stream_settings/stream_member_list_entry.hbs
+++ b/web/templates/stream_settings/stream_member_list_entry.hbs
@@ -8,7 +8,7 @@
    <td class="hidden-subscriber-email">{{t "(hidden)"}}</td>
    {{/if}}
    {{#if can_remove_subscribers}}
-    <td class="unsubscribe remove-button-wrapper">
+    <td class="unsubscribe remove-button-wrapper remove-button-column">
        {{#if for_user_group_members}}
            {{> ../components/icon_button icon="close" custom_classes="hidden-remove-button remove-subscriber-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Remove") data-tippy-content=(t "Remove") }}
        {{else}}
--- a/web/templates/stream_settings/stream_members_table.hbs
+++ b/web/templates/stream_settings/stream_members_table.hbs
@@ -2,14 +2,14 @@
    <div class="subscriber_list_loading_indicator"></div>
    <table id="stream_members_list" class="subscriber-list table table-striped">
        <thead class="table-sticky-headers">
-            <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+            <th class="panel_user_list" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
            </th>
            <th class="settings-email-column" data-sort="email">{{t "Email" }}
                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
            </th>
            {{#if can_remove_subscribers}}
-            <th></th>
+            <th class="remove-button-column"></th>
            {{/if}}
        </thead>
        <tbody class="subscriber_table" data-empty="{{t 'This channel has no subscribers.' }}" data-search-results-empty="{{t 'No channel subscribers match your current filter.'}}"></tbody>
--- a/web/templates/user_group_settings/new_user_group_subgroup.hbs
+++ b/web/templates/user_group_settings/new_user_group_subgroup.hbs
@@ -3,7 +3,7 @@
        {{> ../user_group_display_only_pill . strikethrough=soft_removed}}
    </td>
    <td class="empty-email-col-for-user-group"></td>
-    <td>
+    <td class="action-column">
        {{#if soft_removed}}
            {{> ../components/action_button custom_classes="undo_soft_removed_potential_subgroup" label=(t "Add") attention="quiet" intent="neutral" aria-label=(t "Add") }}
        {{else}}
--- a/web/templates/user_group_settings/new_user_group_users.hbs
+++ b/web/templates/user_group_settings/new_user_group_users.hbs
@@ -15,13 +15,13 @@
    <div class="member_list_container" data-simplebar data-simplebar-tab-index="-1">
        <table class="member-list table table-striped">
            <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                <th class="panel_user_list" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
                </th>
                <th class="settings-email-column" data-sort="email">{{t "Email" }}
                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
                </th>
-                <th>{{t "Action" }}</th>
+                <th class="action-column">{{t "Action" }}</th>
            </thead>
            <tbody id="create_user_group_members" class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>
        </table>
--- a/web/templates/user_group_settings/user_group_members_table.hbs
+++ b/web/templates/user_group_settings/user_group_members_table.hbs
@@ -2,13 +2,13 @@
    <div class="member_list_loading_indicator"></div>
    <table class="member-list table table-striped">
        <thead class="table-sticky-headers">
-            <th data-sort="name">{{t "Name" }}
+            <th class="panel_user_list" data-sort="name">{{t "Name" }}
                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
            </th>
            <th class="settings-email-column" data-sort="email">{{t "Email" }}
                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
            </th>
-            <th {{#unless can_remove_members}}style="display:none"{{/unless}}></th>
+            <th class="remove-button-column" {{#unless can_remove_members}}style="display:none"{{/unless}}></th>
        </thead>
        <tbody class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>
    </table>
--- a/web/templates/user_group_settings/user_group_subgroup_entry.hbs
+++ b/web/templates/user_group_settings/user_group_subgroup_entry.hbs
@@ -4,7 +4,7 @@
    </td>
    <td class="empty-email-col-for-user-group"></td>
    {{#if can_remove_members}}
-    <td class="remove remove-button-wrapper">
+    <td class="remove remove-button-wrapper remove-button-column">
        {{> ../components/icon_button icon="close" custom_classes="hidden-remove-button remove-subgroup-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Remove") data-tippy-content=(t "Remove") }}
    </td>
    {{/if}}