stream_settings_ui: Avoid two scrollbars.

Fixes #26823

Fixes user card not displayed on last item in the subscribers list.
This was happening because there wan not enough space below the
user name for the popover to be displayed (as far as I understand this).

Regardless of the fix above, this seems like a nice change.

web/src/resize.js

@@ -126,6 +126,41 @@ export function resize_bottom_whitespace() {
     }
 }
 
+export function resize_stream_subscribers_list() {
+    // Calculates the height of the subscribers list in stream settings.
+    // This avoids the stream settings from overflowing the container and
+    // having a scroll bar.
+
+    if (!$("#stream_settings").length === 1) {
+        // Don't run if stream settings (like $subscriptions_info below) is not open.
+        return;
+    }
+
+    const $subscriptions_info = $("#subscription_overlay .subscriptions-container .right");
+    const classes_above_subscribers_list = [
+        ".display-type", // = stream_settings_title
+        ".subscriber_list_settings_container .stream_settings_header",
+        ".subscription_settings .stream_setting_subsection_title",
+        ".subscription_settings .subscriber_list_settings",
+        ".subscription_settings .stream_setting_subsection_title",
+    ];
+    const $classes_above_subscribers_list = $subscriptions_info.find(
+        classes_above_subscribers_list.join(", "),
+    );
+    let total_height_of_classes_above_subscribers_list = 0;
+    $classes_above_subscribers_list.each(function () {
+        total_height_of_classes_above_subscribers_list += $(this).outerHeight(true);
+    });
+    const subscribers_list_header_height = 30;
+    const margin_between_tab_switcher_and_add_subscribers_title = 20;
+    const subscribers_list_height =
+        $subscriptions_info.height() -
+        total_height_of_classes_above_subscribers_list -
+        subscribers_list_header_height -
+        margin_between_tab_switcher_and_add_subscribers_title;
+    $("html").css("--stream-subscriber-list-max-height", `${subscribers_list_height}px`);
+}
+
 export function resize_stream_filters_container() {
     const h = get_new_heights();
     resize_bottom_whitespace();
@@ -162,4 +197,5 @@ export function resize_page_components() {
     resize_navbar_alerts();
     const h = resize_sidebars();
     resize_bottom_whitespace(h);
+    resize_stream_subscribers_list();
 }

web/src/stream_settings_ui.js

@@ -20,6 +20,7 @@ import * as message_live_update from "./message_live_update";
 import * as message_view_header from "./message_view_header";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
+import * as resize from "./resize";
 import * as scroll_util from "./scroll_util";
 import * as search_util from "./search_util";
 import * as settings_config from "./settings_config";
@@ -698,6 +699,7 @@ export function switch_to_stream_row(stream_id) {
 function show_right_section() {
     $(".right").addClass("show");
     $(".subscriptions-header").addClass("slide-left");
+    resize.resize_stream_subscribers_list();
 }
 
 export function change_state(section) {

web/styles/subscriptions.css

@@ -135,8 +135,7 @@ h4.user_group_setting_subsection_title {
     .member_list_container,
     .subscriber_list_container {
         position: relative;
-        /* 2*45px (settings header) + 38px(tab-container row) + 20px (margin for .inner-box) + 134px (add user input and search widget area) = 282px */
-        max-height: calc(95vh - 282px);
+        max-height: var(--stream-subscriber-list-max-height);
         overflow: auto;
         text-align: left;
         -webkit-overflow-scrolling: touch;

web/styles/zulip.css

@@ -160,6 +160,13 @@ body {
     */
     --max-unexpanded-compose-height: 40vh;
 
+    /*
+    Maximum height of the subscribers list in stream settings so that
+    it doesn't cause the container to have a second scrollbar.
+    This value will be overridden when stream settings is opened.
+    */
+    --stream-subscriber-list-max-height: 100%;
+
     /* Colors used across the app */
     --color-date: hsl(0deg 0% 15% / 75%);
     --color-background-private-message-header: hsl(46deg 35% 93%);