settings: Calculate height of create modal through javascript.

We need this height to be flexible based on if the subheader has
overflowed into two rows or not, and our method of doing this
(with existing examples in the buddy list and stream list) is to
calculate what the height should be when a window is loaded or
resized.

web/src/resize.ts

@@ -218,9 +218,24 @@ function resize_navbar_alerts(): void {
     }
 }
 
+export function resize_settings_creation_overlay(): void {
+    if ($(".two-pane-settings-creation-simplebar-container").length === 0) {
+        return;
+    }
+
+    $(".two-pane-settings-creation-simplebar-container").css(
+        "height",
+        height_of($(".two-pane-settings-container")) -
+            height_of($(".two-pane-settings-header")) -
+            height_of($(".two-pane-settings-overlay .display-type")) -
+            height_of($(".settings-sticky-footer")),
+    );
+}
+
 export function resize_page_components(): void {
     resize_navbar_alerts();
     resize_sidebars();
     resize_bottom_whitespace();
     resize_stream_subscribers_list();
+    resize_settings_creation_overlay();
 }

web/src/stream_create.ts

@@ -12,6 +12,7 @@ import {$t, $t_html} from "./i18n.ts";
 import * as keydown_util from "./keydown_util.ts";
 import * as loading from "./loading.ts";
 import * as onboarding_steps from "./onboarding_steps.ts";
+import * as resize from "./resize.ts";
 import * as settings_components from "./settings_components.ts";
 import * as settings_data from "./settings_data.ts";
 import {current_user, realm} from "./state_data.ts";
@@ -458,6 +459,7 @@ export function show_new_stream_modal(): void {
     $("#stream-creation").removeClass("hide");
     $(".right .settings").hide();
     stream_ui_updates.hide_or_disable_stream_privacy_options_if_required($("#stream-creation"));
+    resize.resize_settings_creation_overlay();
 
     stream_create_subscribers.build_widgets();
 

web/src/stream_settings_ui.ts

@@ -953,6 +953,7 @@ export function change_state(
     if (section === "new") {
         do_open_create_stream();
         show_right_section();
+        resize.resize_settings_creation_overlay();
         return;
     }
 

web/src/user_group_create.ts

@@ -9,6 +9,7 @@ import * as group_permission_settings from "./group_permission_settings.ts";
 import {$t, $t_html} from "./i18n.ts";
 import * as keydown_util from "./keydown_util.ts";
 import * as loading from "./loading.ts";
+import * as resize from "./resize.ts";
 import * as settings_components from "./settings_components.ts";
 import * as settings_data from "./settings_data.ts";
 import {realm} from "./state_data.ts";
@@ -183,6 +184,7 @@ function clear_error_display(): void {
 export function show_new_user_group_modal(): void {
     $("#user-group-creation").removeClass("hide");
     $(".right .settings").hide();
+    resize.resize_settings_creation_overlay();
 
     user_group_create_members.build_widgets();
 

web/src/user_group_edit.ts

@@ -40,6 +40,7 @@ import * as ListWidget from "./list_widget.ts";
 import * as loading from "./loading.ts";
 import * as overlays from "./overlays.ts";
 import * as people from "./people.ts";
+import * as resize from "./resize.ts";
 import * as scroll_util from "./scroll_util.ts";
 import type {UserGroupUpdateEvent} from "./server_event_types.ts";
 import * as settings_components from "./settings_components.ts";
@@ -1465,6 +1466,7 @@ export function change_state(
     if (section === "new") {
         do_open_create_user_group();
         redraw_user_group_list();
+        resize.resize_settings_creation_overlay();
         return;
     }
 

web/styles/app_variables.css

@@ -582,8 +582,6 @@
        in subscriptions and user group settings overlays */
     --settings-overlay-subheader-height: 3.1429em; /* 44px at 14px/em */
     --settings-overlay-header-button-height: 2em;
-    /* .settings-sticky-footer */
-    --subscriptions-overlay-sticky-footer-height: 60px;
     /* Informational overlay */
     --informational-overlay-max-width: 43.75em;
     --modal-input-width: 23.2142em;

web/styles/subscriptions.css

@@ -924,22 +924,6 @@ h4.user_group_setting_subsection_title {
         outline: none;
         -webkit-overflow-scrolling: touch;
 
-        .stream-creation-simplebar-container,
-        .user-group-creation-simplebar-container {
-            height: calc(
-                var(--overlay-container-height) -
-                    var(--settings-overlay-header-height) -
-                    var(--settings-overlay-subheader-height) -
-                    var(--subscriptions-overlay-sticky-footer-height)
-            );
-            max-height: calc(
-                var(--overlay-container-max-height) -
-                    var(--settings-overlay-header-height) -
-                    var(--settings-overlay-subheader-height) -
-                    var(--subscriptions-overlay-sticky-footer-height)
-            );
-        }
-
         .user-group-creation-body,
         .stream-creation-body {
             padding: 15px 15px 0;

web/templates/stream_settings/stream_creation_form.hbs

@@ -1,7 +1,7 @@
 <div class="hide" id="stream-creation" tabindex="-1" role="dialog"
   aria-label="{{t 'Channel creation' }}">
     <form id="stream_creation_form">
-        <div class="stream-creation-simplebar-container" data-simplebar data-simplebar-tab-index="-1">
+        <div class="two-pane-settings-creation-simplebar-container" data-simplebar data-simplebar-tab-index="-1">
             <div class="alert stream_create_info"></div>
             <div id="stream_creating_indicator"></div>
             <div class="stream-creation-body">

web/templates/user_group_settings/user_group_creation_form.hbs

@@ -1,7 +1,7 @@
 <div class="hide" id="user-group-creation" tabindex="-1" role="dialog"
   aria-label="{{t 'User group creation' }}">
     <form id="user_group_creation_form">
-        <div class="user-group-creation-simplebar-container" data-simplebar data-simplebar-tab-index="-1">
+        <div class="two-pane-settings-creation-simplebar-container" data-simplebar data-simplebar-tab-index="-1">
             <div class="alert user_group_create_info"></div>
             <div id="user_group_creating_indicator"></div>
             <div class="user-group-creation-body">