From a16bc0e5b1553896b97c9a8c32ff539f84e59dcd Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Tue, 18 Mar 2025 12:07:48 -0700
Subject: [PATCH] settings: Add a generic classname for two pane overlays.

---
 web/styles/subscriptions.css                  | 24 +++++++------------
 .../stream_settings_overlay.hbs               |  2 +-
 .../user_group_settings_overlay.hbs           |  2 +-
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index 328ebc4923..eccc54d645 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -911,13 +911,11 @@ h4.user_group_setting_subsection_title {
 }
 
 #settings_page,
-#groups_overlay,
-#subscription_overlay {
+.two-pane-settings-overlay {
     container: settings-overlay / inline-size;
 }
 
-#groups_overlay,
-#subscription_overlay {
+.two-pane-settings-overlay {
     .tab-switcher {
         display: flex;
         flex-wrap: nowrap;
@@ -1433,10 +1431,10 @@ div.settings-radio-input-parent {
 }
 
 /* Note that this block has settings_page CSS as well, and thus needs
-   to match the media queries in settings.css.
+   to match the media queries in settings.css
 
-   Longer-term we should extract this logic two-column-overlay class
-   to read more naturally. */
+   We should eventually consolidate some of these styles with the settings
+   menu, using shared classnames. */
 @container settings-overlay (width < $settings_overlay_sidebar_collapse_breakpoint) {
     .two-pane-settings-container {
         position: relative;
@@ -1451,10 +1449,8 @@ div.settings-radio-input-parent {
         }
     }
 
-    #groups_overlay .left,
-    #groups_overlay .right,
-    #subscription_overlay .left,
-    #subscription_overlay .right,
+    .two-pane-settings-overlay .left,
+    .two-pane-settings-overlay .right,
     #settings_page .content-wrapper.right {
         position: absolute;
         display: block;
@@ -1465,8 +1461,7 @@ div.settings-radio-input-parent {
         border: none;
     }
 
-    #groups_overlay .right,
-    #subscription_overlay .right,
+    .two-pane-settings-overlay .right,
     #settings_page .content-wrapper.right {
         position: absolute;
         left: 101%;
@@ -1483,8 +1478,7 @@ div.settings-radio-input-parent {
         }
     }
 
-    #subscription_overlay,
-    #groups_overlay {
+    .two-pane-settings-overlay {
         .two-pane-settings-container {
             height: 95%;
         }
diff --git a/web/templates/stream_settings/stream_settings_overlay.hbs b/web/templates/stream_settings/stream_settings_overlay.hbs
index b82af36406..4540d3d1b2 100644
--- a/web/templates/stream_settings/stream_settings_overlay.hbs
+++ b/web/templates/stream_settings/stream_settings_overlay.hbs
@@ -1,4 +1,4 @@
-<div id="subscription_overlay" class="overlay" data-overlay="subscriptions">
+<div id="subscription_overlay" class="overlay two-pane-settings-overlay" data-overlay="subscriptions">
     <div class="flex overlay-content">
         <div class="two-pane-settings-container overlay-container">
             <div class="two-pane-settings-header">
diff --git a/web/templates/user_group_settings/user_group_settings_overlay.hbs b/web/templates/user_group_settings/user_group_settings_overlay.hbs
index e1b66b82b0..ffd4d2f5f7 100644
--- a/web/templates/user_group_settings/user_group_settings_overlay.hbs
+++ b/web/templates/user_group_settings/user_group_settings_overlay.hbs
@@ -1,4 +1,4 @@
-<div id="groups_overlay" class="overlay" data-overlay="group_subscriptions">
+<div id="groups_overlay" class="two-pane-settings-overlay overlay" data-overlay="group_subscriptions">
     <div class="flex overlay-content">
         <div class="two-pane-settings-container overlay-container">
             <div class="two-pane-settings-header">