From 616a95784247e25259f5329ce8d5f2f1fc66f028 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Fri, 21 Mar 2025 20:06:56 +0530
Subject: [PATCH] settings: Improve subsection header styling.

This commit makes all the subsection header as flex boxes, and improves
it's CSS styling.
---
 web/styles/app_components.css                 | 20 ++++++++-----------
 web/styles/settings.css                       |  5 +----
 web/styles/subscriptions.css                  | 15 +-------------
 .../settings/notification_settings.hbs        | 12 +++++------
 .../organization_user_settings_defaults.hbs   |  2 +-
 .../settings/preferences_general.hbs          |  2 +-
 6 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index a5305c8d3e..f5653439a1 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -869,22 +869,18 @@ input.settings_text_input {
     }
 }
 
-#stream_settings,
-#settings_page,
-#user_group_settings {
-    .subsection-header {
-        display: flex;
-        flex-wrap: wrap;
-    }
+.subsection-header {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0.2857em 0;
+    gap: 0 0.625em; /* 10px at 16px em */
+    align-items: center;
 }
 
-#stream_settings .save-button-controls,
-#settings_page .save-button-controls,
-#user_group_settings .save-button-controls {
+.save-button-controls {
     display: flex;
-    margin: 0.2857em 0.5714em; /* 4px 8px at 14px/em */
     align-items: center;
-    gap: 5px;
+    gap: 0.3125em; /* 5px at 16px em */
 
     &.hide {
         display: none;
diff --git a/web/styles/settings.css b/web/styles/settings.css
index 35ff6c2264..b42906ac95 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -507,13 +507,10 @@ input[type="checkbox"] {
 
 .advanced-configurations-container {
     .advance-config-title-container {
-        display: flex;
-        align-items: center;
         cursor: pointer;
-        flex-wrap: wrap;
 
         .stream_setting_subsection_title {
-            margin: 4px 8px;
+            margin: 4px 0;
         }
 
         .toggle-advanced-configurations-icon {
diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index eccc54d645..7819418df7 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -121,7 +121,7 @@ h3.user_group_setting_subsection_title {
     font-size: 1.5em;
     font-weight: normal;
     line-height: 1.5;
-    margin: 4px 15px 4px 0;
+    margin: 4px 0;
 }
 
 h4.stream_setting_subsection_title {
@@ -134,8 +134,6 @@ h4.user_group_setting_subsection_title {
     font-size: 1.35em;
     font-weight: normal;
     line-height: 1.5;
-    /* Matches right margin on h3 subsection titles */
-    margin-right: 15px;
 }
 
 .member-list-box,
@@ -307,8 +305,6 @@ h4.user_group_setting_subsection_title {
 
 .group-assigned-permissions {
     .subsection-header {
-        display: inline;
-
         h3 {
             font-size: 1.5em;
             font-weight: normal;
@@ -1521,15 +1517,6 @@ div.settings-radio-input-parent {
             max-width: max-content;
             white-space: nowrap;
         }
-
-        .save-button-controls {
-            display: block;
-            margin: 0 0 10px;
-
-            &.hide {
-                display: none;
-            }
-        }
     }
 }
 
diff --git a/web/templates/settings/notification_settings.hbs b/web/templates/settings/notification_settings.hbs
index 7109a5352c..a01cde7aa7 100644
--- a/web/templates/settings/notification_settings.hbs
+++ b/web/templates/settings/notification_settings.hbs
@@ -1,6 +1,6 @@
 <form class="notification-settings-form">
     <div class="general_notifications {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
-        <div class="subsection-header inline-block">
+        <div class="subsection-header">
             <h3>{{t "Notification triggers" }}</h3>
             {{> settings_save_discard_widget section_name="general-notify-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
@@ -55,7 +55,7 @@
 
     <div class="topic_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
 
-        <div class="subsection-header inline-block">
+        <div class="subsection-header">
             <h3>{{t "Topic notifications" }}
                 {{> ../help_link_widget link="/help/topic-notifications" }}
             </h3>
@@ -100,7 +100,7 @@
 
     <div class="desktop_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
 
-        <div class="subsection-header inline-block">
+        <div class="subsection-header">
             <h3>{{t "Desktop message notifications" }}
                 {{> ../help_link_widget link="/help/desktop-notifications" }}
             </h3>
@@ -148,7 +148,7 @@
 
     <div class="mobile_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
 
-        <div class="subsection-header inline-block">
+        <div class="subsection-header">
             <h3>{{t "Mobile message notifications" }}
                 {{> ../help_link_widget link="/help/mobile-notifications" }}
             </h3>
@@ -175,7 +175,7 @@
 
     <div class="email_message_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
 
-        <div class="subsection-header inline-block">
+        <div class="subsection-header">
             <h3>{{t "Email message notifications" }}
                 {{> ../help_link_widget link="/help/email-notifications" }}
             </h3>
@@ -224,7 +224,7 @@
 
     <div class="other_email_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
 
-        <div class="subsection-header inline-block">
+        <div class="subsection-header">
             <h3>{{t "Other emails" }}</h3>
             {{> settings_save_discard_widget section_name="other-emails-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
diff --git a/web/templates/settings/organization_user_settings_defaults.hbs b/web/templates/settings/organization_user_settings_defaults.hbs
index 720ffd728c..79118efc2b 100644
--- a/web/templates/settings/organization_user_settings_defaults.hbs
+++ b/web/templates/settings/organization_user_settings_defaults.hbs
@@ -11,7 +11,7 @@
     {{> notification_settings . prefix="realm_" for_realm_settings=true}}
 
     <div class="privacy_settings settings-subsection-parent">
-        <div class="subsection-header inline-block">
+        <div class="subsection-header">
             <h3 class="inline-block">{{t "Privacy settings" }}</h3>
             {{> settings_save_discard_widget section_name="privacy-setting" show_only_indicator=false }}
         </div>
diff --git a/web/templates/settings/preferences_general.hbs b/web/templates/settings/preferences_general.hbs
index 63e3ffd4fd..43e1ebbf17 100644
--- a/web/templates/settings/preferences_general.hbs
+++ b/web/templates/settings/preferences_general.hbs
@@ -1,7 +1,7 @@
 <div class="general-settings {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
     <!-- this is inline block so that the alert notification can sit beside
     it. If there's not an alert, don't make it inline-block.-->
-    <div class="subsection-header inline-block">
+    <div class="subsection-header">
         <h3>{{t "General" }}</h3>
         {{> settings_save_discard_widget section_name="general-settings" show_only_indicator=(not for_realm_settings) }}
     </div>