UX: Fix & clarify bulk notification change modal (#11969)

app/assets/javascripts/discourse/app/templates/modal/bulk-notification-level.hbs

@@ -1,13 +1,15 @@
-{{#each notificationLevels as |level|}}
-  <div class="controls">
-    <label class="radio">
-      {{radio-button value=level.id name="notification_level" selection=notificationLevelId}} <strong>{{level.name}}</strong>
-      <div class="description">{{html-safe level.description}}</div>
-    </label>
-  </div>
-{{/each}}
+<div class="bulk-notification-list">
+  {{#each notificationLevels as |level|}}
+    <div class="controls">
+      <label class="radio notification-level-radio">
+        {{radio-button value=level.id name="notification_level" selection=notificationLevelId}} <strong>{{level.name}}</strong>
+        <div class="description">{{html-safe level.description}}</div>
+      </label>
+    </div>
+  {{/each}}
+</div>
 
 {{d-button
   disabled=disabled
   action=(action "changeNotificationLevel")
-  label="topics.bulk.notification_level"}}
+  label="topics.bulk.change_notification_level"}}

app/assets/stylesheets/common/base/modal.scss

@@ -672,6 +672,20 @@
   }
 }
 
+.bulk-notification-list {
+  margin-bottom: 1.5em;
+}
+
+.notification-level-radio {
+  flex-wrap: wrap;
+  align-items: baseline;
+  margin-bottom: 0.5em;
+  .description {
+    width: 100%;
+    margin-top: 0.25em;
+  }
+}
+
 .modal.edit-slow-mode-modal {
   .slow-mode-label {
     display: inline-flex;

config/locales/client.en.yml

@@ -2257,6 +2257,7 @@ en:
         close_topics: "Close Topics"
         archive_topics: "Archive Topics"
         notification_level: "Notifications"
+        change_notification_level: "Change Notification Level"
         choose_new_category: "Choose the new category for the topics:"
         selected:
           one: "You have selected <b>%{count}</b> topic."