settings: Replace two pane container classnames with a generic one.

web/src/resize.ts

@@ -139,7 +139,7 @@ export function resize_stream_subscribers_list(): void {
         return;
     }
 
-    const $subscriptions_info = $("#subscription_overlay .subscriptions-container .right");
+    const $subscriptions_info = $("#subscription_overlay .two-pane-settings-container .right");
     const classes_above_subscribers_list = [
         ".display-type", // = stream_settings_title
         ".subscriber_list_settings_container .stream_settings_header",

web/src/stream_settings_components.ts

@@ -99,7 +99,9 @@ export function get_active_data(): {
 } {
     const $active_row = $("div.stream-row.active");
     const valid_active_id = Number.parseInt($active_row.attr("data-stream-id")!, 10);
-    const $active_tabs = $(".subscriptions-container").find("div.ind-tab.selected");
+    const $active_tabs = $("#subscription_overlay .two-pane-settings-container").find(
+        "div.ind-tab.selected",
+    );
     return {
         $row: $active_row,
         id: valid_active_id,

web/src/user_group_edit.ts

@@ -1216,7 +1216,7 @@ function empty_right_panel(): void {
 
 function open_right_panel_empty(): void {
     empty_right_panel();
-    const tab_key = $(".user-groups-container")
+    const tab_key = $("#groups_overlay .two-pane-settings-container")
         .find("div.ind-tab.selected")
         .first()
         .attr("data-tab-key");
@@ -1302,7 +1302,9 @@ export function is_group_already_present(group: UserGroup): boolean {
 }
 
 export function get_active_data(): ActiveData {
-    const $active_tabs = $(".user-groups-container").find("div.ind-tab.selected");
+    const $active_tabs = $("#groups_overlay .two-pane-settings-container").find(
+        "div.ind-tab.selected",
+    );
     const active_group_id = user_group_components.active_group_id;
     let $row;
     if (active_group_id !== undefined) {

web/styles/subscriptions.css

@@ -280,8 +280,8 @@ h4.user_group_setting_subsection_title {
     display: inline;
 }
 
-.subscriptions-container .subscriptions-header .fa-chevron-left,
-.user-groups-container .user-groups-header .fa-chevron-left {
+.two-pane-settings-container .subscriptions-header .fa-chevron-left,
+.two-pane-settings-container .user-groups-header .fa-chevron-left {
     position: relative;
     transform: translate(-50px, 0);
     opacity: 0;
@@ -291,13 +291,14 @@ h4.user_group_setting_subsection_title {
     padding: 2px 10px;
 
     cursor: pointer;
+    visibility: hidden;
 
     transition: 0.3s ease;
     transition-property: opacity, transform;
 }
 
-.user-groups-container .user-groups-header.slide-left .fa-chevron-left,
-.subscriptions-container .subscriptions-header.slide-left .fa-chevron-left,
+.two-pane-settings-container .user-groups-header.slide-left .fa-chevron-left,
+.two-pane-settings-container .subscriptions-header.slide-left .fa-chevron-left,
 #settings_overlay_container
     .settings-header.mobile.slide-left
     .fa-chevron-left {
@@ -342,7 +343,7 @@ h4.user_group_setting_subsection_title {
     }
 }
 
-.subscriptions-container {
+#subscription_overlay .two-pane-settings-container {
     container: subscriptions / inline-size;
 }
 
@@ -359,7 +360,7 @@ h4.user_group_setting_subsection_title {
     ((width >= $settings_overlay_sidebar_collapse_breakpoint) and (width < calc(80em + 80px)))
     or ((width < $settings_overlay_sidebar_collapse_breakpoint) and (width <= 36em))
 ) {
-    #subscription_overlay .subscriptions-container {
+    #subscription_overlay .two-pane-settings-container {
         .left {
             .list-toggler-container {
                 height: 5em;
@@ -399,8 +400,7 @@ h4.user_group_setting_subsection_title {
     }
 }
 
-.user-groups-container,
-.subscriptions-container {
+.two-pane-settings-container {
     position: relative;
     height: 95%;
     border-radius: 4px;
@@ -431,10 +431,6 @@ h4.user_group_setting_subsection_title {
         background-color: var(--color-background-modal-bar);
         border-bottom: 1px solid var(--color-border-modal-bar);
 
-        .fa-chevron-left {
-            visibility: hidden;
-        }
-
         .exit {
             font-weight: 600;
             color: hsl(0deg 0% 67%);
@@ -1420,12 +1416,11 @@ div.settings-radio-input-parent {
 }
 
 @media (width < $lg_min) {
-    .user-groups-container,
-    .subscriptions-container {
+    .two-pane-settings-container {
         max-width: 95%;
     }
 
-    .subscriptions-container .left .list-toggler-container {
+    .two-pane-settings-container .left .list-toggler-container {
         flex-wrap: wrap;
     }
 
@@ -1445,8 +1440,7 @@ div.settings-radio-input-parent {
    Longer-term we should extract this logic two-column-overlay class
    to read more naturally. */
 @container settings-overlay (width < $settings_overlay_sidebar_collapse_breakpoint) {
-    .user-groups-container,
-    .subscriptions-container {
+    .two-pane-settings-container {
         position: relative;
         overflow: hidden;
 
@@ -1494,8 +1488,7 @@ div.settings-radio-input-parent {
 
     #subscription_overlay,
     #groups_overlay {
-        .user-groups-container,
-        .subscriptions-container {
+        .two-pane-settings-container {
             height: 95%;
         }
 

web/templates/stream_settings/stream_settings_overlay.hbs

@@ -1,6 +1,6 @@
 <div id="subscription_overlay" class="overlay" data-overlay="subscriptions">
     <div class="flex overlay-content">
-        <div class="subscriptions-container overlay-container">
+        <div class="two-pane-settings-container overlay-container">
             <div class="subscriptions-header">
                 <div class="fa fa-chevron-left"></div>
                 <span class="subscriptions-title">{{t 'Channels' }}</span>

web/templates/user_group_settings/user_group_settings_overlay.hbs

@@ -1,6 +1,6 @@
 <div id="groups_overlay" class="overlay" data-overlay="group_subscriptions">
     <div class="flex overlay-content">
-        <div class="user-groups-container overlay-container">
+        <div class="two-pane-settings-container overlay-container">
             <div class="user-groups-header">
                 <div class="fa fa-chevron-left"></div>
                 <span class="user-groups-title">{{t 'User groups' }}</span>