stream_settings: Fix scroll at max-height.

Simplebar seems unaware of the `max-height: 1000px` on
`.subscriptions-container`, and therefore does not properly provide
a scrollbar when it's needed.

This commit adds a `max-height` to the stream Simplebar container,
ensuring that otherwise hidden content that Simplebar believes to
be visible can be scrolled to.

Finally, rather than rely on magic numbers or math done in comments,
this commit establishes CSS variables for all relevant modal-element
heights, doing the math inline using CSS calc().

Fixes #26107.

(cherry picked from commit 0c55fb7e89)

web/styles/subscriptions.css

@@ -300,7 +300,7 @@ h4.user_group_setting_subsection_title {
     width: 97%;
     overflow: hidden;
     max-width: 1200px;
-    max-height: 1000px;
+    max-height: var(--modal-container-max-height);
 
     .search-container .tab-switcher .ind-tab {
         width: auto;
@@ -700,10 +700,18 @@ h4.user_group_setting_subsection_title {
         -webkit-overflow-scrolling: touch;
 
         .stream-creation-simplebar-container {
-            /*
-                45px (.subscriptions-header) +  44px (.display-type) + 60px (.modal-footer)
-            */
-            height: calc(95vh - 149px);
+            height: calc(
+                var(--modal-container-height) -
+                    var(--modal-container-subscriptions-header-height) -
+                    var(--modal-container-subscriptions-display-type-height) -
+                    var(--modal-container-subscriptions-modal-footer-height)
+            );
+            max-height: calc(
+                var(--modal-container-max-height) -
+                    var(--modal-container-subscriptions-header-height) -
+                    var(--modal-container-subscriptions-display-type-height) -
+                    var(--modal-container-subscriptions-modal-footer-height)
+            );
         }
 
         .user-group-creation-body,

web/styles/zulip.css

@@ -118,6 +118,16 @@ body {
        We expect `resize.js` to update this once UI is initialized. */
     --recent-topics-filters-height: 50px;
 
+    /* Overlay heights for streams modal */
+    --modal-container-height: 95vh;
+    --modal-container-max-height: 1000px;
+    /* .subscriptions-header */
+    --modal-container-subscriptions-header-height: 45px;
+    /* .display-type */
+    --modal-container-subscriptions-display-type-height: 44px;
+    /* .modal-footer */
+    --modal-container-subscriptions-modal-footer-height: 60px;
+
     /*
     Maximum height of the compose box when it is not in expanded state. This
     is equal to the height of `#bottom_whitespace`. We expect resize.js to