From ea65da462ea6f85526c44407cf7b02f712233b22 Mon Sep 17 00:00:00 2001
From: jai2201 <jai_s@me.iitr.ac.in>
Date: Wed, 2 Mar 2022 22:35:33 +0530
Subject: [PATCH] stream-settings: Use CSS nesting at media breakpoints.

Avoid writing repeated class name of `#subscription_overlay` and `subscription_settings`
for CSS at media breakpoints.
---
 static/styles/subscriptions.css | 52 +++++++++++++++++----------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index a86d4a5b8c..bee025e9f5 100644
--- a/static/styles/subscriptions.css
+++ b/static/styles/subscriptions.css
@@ -1196,42 +1196,44 @@ h4.stream_setting_subsection_title {
         .stream-header .button-group {
             margin-top: -5px;
         }
-    }
 
-    #subscription_overlay .subscription_settings .stream_change_property_info {
-        /* For small widths where there is not enough space
-        to show alert beside stream name we set its display
-        to block so it is shown in new line. But to avoid
-        it covering whole screen width we set max-width
-        so that it does not losses inline-block appearance. */
+        .stream_change_property_info {
+            /* For small widths where there is not enough space
+            to show alert beside stream name we set its display
+            to block so it is shown in new line. But to avoid
+            it covering whole screen width we set max-width
+            so that it does not losses inline-block appearance. */
 
-        /* TODO: This will probably be not required once
-        we have tabbed navigation as button group width
-        will be smaller. */
-        display: block;
-        max-width: max-content;
-        white-space: nowrap;
+            /* TODO: This will probably be not required once
+            we have tabbed navigation as button group width
+            will be smaller. */
+            display: block;
+            max-width: max-content;
+            white-space: nowrap;
+        }
     }
 }
 
 @media (width <= 500px) {
-    #subscription_overlay .stream_settings_header {
-        display: block;
-        text-align: center;
-        margin-left: 0;
+    #subscription_overlay {
+        .stream_settings_header {
+            display: block;
+            text-align: center;
+            margin-left: 0;
 
-        .tab-container {
-            .ind-tab {
-                width: 85px;
+            .tab-container {
+                .ind-tab {
+                    width: 85px;
+                }
             }
         }
-    }
 
-    #subscription_overlay .stream_setting_subsection_header {
-        display: block;
+        .stream_setting_subsection_header {
+            display: block;
 
-        .stream_permission_change_info {
-            margin: 12px auto 0 3px;
+            .stream_permission_change_info {
+                margin: 12px auto 0 3px;
+            }
         }
     }
 }