DEV: flexify post actions (#9926)

* DEV: flexify post actions

* more tweaks

app/assets/javascripts/discourse/app/widgets/post-menu.js

@@ -395,7 +395,7 @@ function replaceButton(buttons, find, replace) {
 }
 
 export default createWidget("post-menu", {
-  tagName: "section.post-menu-area.clearfix",
+  tagName: "section.post-menu-area",
 
   settings: {
     collapseButtons: true,
@@ -573,7 +573,7 @@ export default createWidget("post-menu", {
 
     const contents = [
       h(
-        "nav.post-controls.clearfix" +
+        "nav.post-controls" +
           (this.state.collapsed ? ".collapsed" : ".expanded"),
         postControls
       )

app/assets/stylesheets/common/components/buttons.scss

@@ -264,6 +264,11 @@
   .d-icon {
     color: $primary-low-mid;
   }
+
+  .d-button-label + .d-icon {
+    margin-left: 0.5em;
+  }
+
   @include hover {
     .d-icon {
       color: $primary;

app/assets/stylesheets/common/printer-friendly.scss

@@ -6,7 +6,7 @@
   header,
   .topic-above-post-stream-outlet.topic-above-post-stream,
   .topic-map,
-  .post-menu-area.clearfix,
+  .post-menu-area,
   div#topic-footer-buttons,
   div.suggested-topics,
   div#progress-topic-wrapper,

app/assets/stylesheets/desktop/topic-post.scss

@@ -52,11 +52,15 @@ section.post-menu-area {
 
 nav.post-controls {
   padding: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   .actions {
-    text-align: right;
-    float: right;
-    display: inline-block;
+    display: flex;
+    justify-content: flex-end;
+    margin-left: auto;
+
     .more-actions {
       display: none;
       overflow: hidden;

app/assets/stylesheets/mobile/topic-post.scss

@@ -28,6 +28,8 @@ span.badge-posts {
 
 .topic-post {
   nav.post-controls {
+    display: flex;
+
     color: dark-light-choose($primary-low-mid, $secondary-high);
     .actions {
       display: flex;