two_pane_settings: Calculate body height from resize instead of fiddly CSS.

Having a set height is necessary for simplebar to work, and the height
will change depending on whether the header is one or two lines.

web/src/resize.ts

@@ -218,6 +218,27 @@ function resize_navbar_alerts(): void {
     }
 }
 
+export function resize_settings_overlay(): void {
+    if ($(".two-pane-settings-overlay.show").length === 0) {
+        return;
+    }
+
+    $(".two-pane-settings-left-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($(".two-pane-settings-search")),
+    );
+
+    $(".two-pane-settings-right-simplebar-container").css(
+        "height",
+        height_of($(".two-pane-settings-container")) -
+            height_of($(".two-pane-settings-header")) -
+            height_of($(".two-pane-settings-overlay .display-type")),
+    );
+}
+
 export function resize_settings_creation_overlay(): void {
     if ($(".two-pane-settings-creation-simplebar-container").length === 0) {
         return;
@@ -237,5 +258,6 @@ export function resize_page_components(): void {
     resize_sidebars();
     resize_bottom_whitespace();
     resize_stream_subscribers_list();
+    resize_settings_overlay();
     resize_settings_creation_overlay();
 }

web/src/stream_settings_ui.ts

@@ -1033,6 +1033,7 @@ export function launch(
                 }
             }
         }, 0);
+        resize.resize_settings_overlay();
     });
 }
 

web/src/user_group_edit.ts

@@ -2128,6 +2128,7 @@ export function launch(
             },
         });
         change_state(section, left_side_tab, right_side_tab);
+        resize.resize_settings_overlay();
     });
     if (!get_active_data().id) {
         if (section === "new") {

web/styles/subscriptions.css

@@ -520,7 +520,6 @@ h4.user_group_setting_subsection_title {
         position: relative;
         display: inline-block;
         vertical-align: top;
-        height: calc(100% - var(--settings-overlay-header-height));
         margin: 0 -2px;
     }
 
@@ -654,11 +653,6 @@ h4.user_group_setting_subsection_title {
     position: relative;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    /* Calculated from several heights and padding/margin measurements
-    in .list-toggler-container and .stream_filter, with some added
-    fiddling to see what worked best at 12px - 20px font sizes.
-    When we redesign this area we should make this less brittle. */
-    height: calc(100% - 3.4em - 40px);
     width: 100%;
 }
 
@@ -1143,7 +1137,6 @@ h4.user_group_setting_subsection_title {
 
     .settings {
         position: relative;
-        height: calc(100% - var(--settings-overlay-header-height));
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
 

web/templates/stream_settings/stream_creation_form.hbs

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

web/templates/stream_settings/stream_settings_overlay.hbs

@@ -19,7 +19,7 @@
                         <div class="float-clear"></div>
                     </div>
                 </div>
-                <div class="input-append stream_name_search_section" id="stream_filter">
+                <div class="input-append stream_name_search_section two-pane-settings-search" id="stream_filter">
                     <input type="text" name="stream_name" id="search_stream_name" class="filter_text_input" autocomplete="off"
                       placeholder="{{t 'Filter' }}" value=""/>
                     <button type="button" class="clear_search_button" id="clear_search_stream_name">
@@ -58,7 +58,7 @@
                         </span>
                     </div>
                 </div>
-                <div class="streams-list" data-simplebar data-simplebar-tab-index="-1">
+                <div class="streams-list two-pane-settings-left-simplebar-container" data-simplebar data-simplebar-tab-index="-1">
                 </div>
             </div>
             <div class="right">
@@ -76,7 +76,7 @@
                         {{/unless}}
                     </div>
                 </div>
-                <div id="stream_settings" class="settings" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
+                <div id="stream_settings" class="two-pane-settings-right-simplebar-container settings" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
                     {{!-- edit stream here --}}
                 </div>
                 {{> stream_creation_form . }}

web/templates/user_group_settings/user_group_creation_form.hbs

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

web/templates/user_group_settings/user_group_settings_overlay.hbs

@@ -19,7 +19,7 @@
                         <div class="float-clear"></div>
                     </div>
                 </div>
-                <div class="input-append group_name_search_section" id="group_filter">
+                <div class="input-append group_name_search_section two-pane-settings-search" id="group_filter">
                     <input type="text" name="group_name" id="search_group_name" class="filter_text_input" autocomplete="off"
                       placeholder="{{t 'Filter' }}" value=""/>
                     <button type="button" class="clear_search_button" id="clear_search_group_name">
@@ -33,7 +33,7 @@
                 </div>
                 <div class="no-groups-to-show">
                 </div>
-                <div class="user-groups-list" data-simplebar data-simplebar-tab-index="-1">
+                <div class="user-groups-list two-pane-settings-left-simplebar-container" data-simplebar data-simplebar-tab-index="-1">
                 </div>
             </div>
             <div class="right">
@@ -53,7 +53,7 @@
                         {{/unless}}
                     </div>
                 </div>
-                <div id="user_group_settings" class="settings" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
+                <div id="user_group_settings" class="two-pane-settings-right-simplebar-container settings" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
                     {{!-- edit user group here --}}
                 </div>
                 {{> user_group_creation_form . }}