diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index 27d05dd231..0ca5e0264e 100644
--- a/web/styles/subscriptions.css
+++ b/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,
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index cbfec1cb2a..85f4c6a0cf 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -115,6 +115,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