settings: Add a generic classname for two pane overlays.

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%;
         }

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">

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">