Add wrapper divs with classes to the topic footer button area

app/assets/javascripts/discourse/components/topic-notifications-button.js.es6

@@ -2,6 +2,7 @@ import MountWidget from 'discourse/components/mount-widget';
 import { observes } from 'ember-addons/ember-computed-decorators';
 
 export default MountWidget.extend({
+  classNames: ['topic-notifications-container'],
   widget: 'topic-notifications-button',
 
   buildArgs() {

app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs

@@ -1,80 +1,84 @@
-{{#if showAdminButton}}
-  {{topic-admin-menu-button
-    topic=topic
-    openUpwards="true"
-    toggleMultiSelect=toggleMultiSelect
-    deleteTopic=deleteTopic
-    recoverTopic=recoverTopic
-    toggleClosed=toggleClosed
-    toggleArchived=toggleArchived
-    toggleVisibility=toggleVisibility
-    showTopicStatusUpdate=showTopicStatusUpdate
-    showFeatureTopic=showFeatureTopic
-    showChangeTimestamp=showChangeTimestamp
-    convertToPublicTopic=convertToPublicTopic
-    convertToPrivateMessage=convertToPrivateMessage}}
-{{/if}}
-
-{{#unless topic.isPrivateMessage}}
-  {{#if site.mobileView}}
-    {{topic-footer-mobile-dropdown topic=topic
-                                   showInvite=showInvite
-                                   showFlagTopic=showFlagTopic}}
-  {{else}}
-    {{d-button class=bookmarkClass
-               title=bookmarkTitle
-               label=bookmarkLabel
-               icon="bookmark"
-               action=toggleBookmark}}
-
-    {{share-button url=topic.shareUrl}}
-
-    {{#if topic.details.can_flag_topic}}
-      {{d-button class="flag-topic"
-                 title="topic.flag_topic.help"
-                 label="topic.flag_topic.title"
-                 icon="flag"
-                 action=showFlagTopic}}
-    {{/if}}
-
+<div class='topic-footer-main-buttons'>
+  {{#if showAdminButton}}
+    {{topic-admin-menu-button
+      topic=topic
+      openUpwards="true"
+      toggleMultiSelect=toggleMultiSelect
+      deleteTopic=deleteTopic
+      recoverTopic=recoverTopic
+      toggleClosed=toggleClosed
+      toggleArchived=toggleArchived
+      toggleVisibility=toggleVisibility
+      showTopicStatusUpdate=showTopicStatusUpdate
+      showFeatureTopic=showFeatureTopic
+      showChangeTimestamp=showChangeTimestamp
+      convertToPublicTopic=convertToPublicTopic
+      convertToPrivateMessage=convertToPrivateMessage}}
   {{/if}}
-{{/unless}}
 
-{{#if canInviteTo}}
-  {{d-button class="invite-topic"
-             title="topic.invite_reply.help"
-             label="topic.invite_reply.title"
-             icon="users"
-             action=showInvite
-             disabled=inviteDisabled}}
-{{/if}}
+  {{#unless topic.isPrivateMessage}}
+    {{#if site.mobileView}}
+      {{topic-footer-mobile-dropdown topic=topic
+                                     showInvite=showInvite
+                                     showFlagTopic=showFlagTopic}}
+    {{else}}
+      {{d-button class=bookmarkClass
+                 title=bookmarkTitle
+                 label=bookmarkLabel
+                 icon="bookmark"
+                 action=toggleBookmark}}
 
-{{#if topic.isPrivateMessage}}
-  {{d-button class="standard"
-             title=archiveTitle
-             label=archiveLabel
-             icon=archiveIcon
-             action=toggleArchiveMessage}}
-{{/if}}
+      {{share-button url=topic.shareUrl}}
 
-{{plugin-outlet name="topic-footer-main-buttons-before-create"
-                args=(hash topic=topic)
-                connectorTagName="span"}}
+      {{#if topic.details.can_flag_topic}}
+        {{d-button class="flag-topic"
+                   title="topic.flag_topic.help"
+                   label="topic.flag_topic.title"
+                   icon="flag"
+                   action=showFlagTopic}}
+      {{/if}}
 
-{{#if topic.details.can_create_post}}
-  {{d-button class="btn-primary create"
-             icon="reply"
-             action=replyToPost
-             label="topic.reply.title"
-             title="topic.reply.help"}}
-{{/if}}
+    {{/if}}
+  {{/unless}}
 
-{{plugin-outlet name="after-topic-footer-main-buttons"
-                args=(hash topic=topic)
-                connectorTagName="span"}}
+  {{#if canInviteTo}}
+    {{d-button class="invite-topic"
+               title="topic.invite_reply.help"
+               label="topic.invite_reply.title"
+               icon="users"
+               action=showInvite
+               disabled=inviteDisabled}}
+  {{/if}}
+
+  {{#if topic.isPrivateMessage}}
+    {{d-button class="standard"
+               title=archiveTitle
+               label=archiveLabel
+               icon=archiveIcon
+               action=toggleArchiveMessage}}
+  {{/if}}
+
+  {{plugin-outlet name="topic-footer-main-buttons-before-create"
+                  args=(hash topic=topic)
+                  connectorTagName="span"}}
+
+  {{#if topic.details.can_create_post}}
+    {{d-button class="btn-primary create"
+               icon="reply"
+               action=replyToPost
+               label="topic.reply.title"
+               title="topic.reply.help"}}
+  {{/if}}
+
+  {{plugin-outlet name="after-topic-footer-main-buttons"
+                  args=(hash topic=topic)
+                  connectorTagName="span"}}
+
+  {{pinned-button topic=topic}}
+</div>
 
-{{pinned-button topic=topic}}
 {{topic-notifications-button topic=topic}}
+
 {{plugin-outlet name="after-topic-footer-buttons"
                 args=(hash topic=topic)
                 connectorTagName="span"}}