compose_banners: Structure innner <p> elements with .banner_message class.

This also styles those inner .banner_message elements to lose
margin inherited from Bootstrap. (This is now also applied to
the upload-message banner.)

It's better to achieve that with a class selector; using a `p`
element selector would mean that such a style would be evaluated
for all `<p>` elements in the DOM. Which is of course a whole lot,
thanks to Markdown alone.

Fixes: #26922

web/styles/compose.css

@@ -294,9 +294,10 @@
         flex-wrap: wrap;
     }
 
-    & .banner_content,
+    & .banner_content {
-    & > p {
+        /* Override Bootstrap when .banner_content is
-        margin: 0; /* override bootstrap */
+           a paragraph element. */
+        margin: 0;
         /* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
         padding: 8px 5px 8px 15px;
         /* The banner text uses a flex-basis of 150px,
@@ -304,6 +305,13 @@
            text lines are still comfortably readable.
            Still, it can grow and shrink as needed. */
         flex: 1 1 150px;
+
+        & .banner_message {
+            /* Override Bootstrap when .banner_content
+               contains an inner .banner_message
+               paragraph. */
+            margin: 0;
+        }
     }
 
     .main-view-banner-action-button,

web/templates/compose_banner/not_subscribed_warning.hbs

@@ -1,7 +1,9 @@
 {{#> compose_banner }}
-    {{#if can_subscribe_other_users}}
+    <p class="banner_message">
-        <p>{{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified unless you subscribe them.{{/tr}}</p>
+        {{#if can_subscribe_other_users}}
-    {{else}}
+            {{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified unless you subscribe them.{{/tr}}
-        <p>{{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified if you mention them.{{/tr}}</p>
+        {{else}}
-    {{/if}}
+            {{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified if you mention them.{{/tr}}
+        {{/if}}
+    </p>
 {{/compose_banner}}

web/templates/compose_banner/private_stream_warning.hbs

@@ -1,3 +1,5 @@
 {{#> compose_banner }}
-    <p>{{#tr}}Warning: <strong>#{stream_name}</strong> is a private stream.{{/tr}}</p>
+    <p class="banner_message">
+        {{#tr}}Warning: <strong>#{stream_name}</strong> is a private stream.{{/tr}}
+    </p>
 {{/compose_banner}}

web/templates/compose_banner/stream_does_not_exist_error.hbs

@@ -1,5 +1,5 @@
 {{#> compose_banner }}
-    <p>
+    <p class="banner_message">
         {{#tr}}
         The stream <b>#{stream_name}</b> does not exist. Manage your subscriptions
         <z-link>on your Streams page</z-link>.

web/templates/compose_banner/unmute_topic_banner.hbs

@@ -1,5 +1,5 @@
 {{#> compose_banner }}
-    <p>
+    <p class="banner_message">
         {{#if (eq muted_narrow "stream")}}
             {{#tr}}Your message was sent to a stream you have muted.{{/tr}}
         {{else if (eq muted_narrow "topic")}}

web/templates/compose_banner/wildcard_warning.hbs

@@ -1,5 +1,5 @@
 {{#> compose_banner }}
-    <p>
+    <p class="banner_message">
         {{#tr}}
         Are you sure you want to send @-mention notifications to the <strong>{subscriber_count}</strong> users subscribed to #{stream_name}? If not, please edit your message to remove the <strong>@{wildcard_mention}</strong> mention.
         {{/tr}}