chore: style the reactions better

Author: dpc

crates/rostra-web-ui/assets/style.css

@@ -431,6 +431,7 @@ img {
   max-width: 50rem;
 }
 
+
 .m-postOverview__userImage {
   margin: 2pt;
 }
@@ -516,10 +517,21 @@ emoji-picker {
 
 .m-postOverview__buttonBar {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   gap: 5pt;
 }
 
+
+.m-postOverview__reactions {
+  display: flex;
+  gap: .5rem;
+}
+
+.m-postOverview__buttons {
+  display: flex;
+  gap: .5rem;
+}
+
 .m-postOverview__commentsButtonIcon {
   background: url('/assets/icons/comment.svg') center/contain no-repeat;
 }

crates/rostra-web-ui/src/routes/timeline.rs

@@ -589,32 +589,36 @@ impl UiState {
         let button_bar = html! {
             @if let Some(ext_event_id) = external_event_id {
                 div ."m-postOverview__buttonBar" {
-                    (reactions_html)
-                    @if let Some(reply_count) = reply_count {
-                        @if reply_count > 0 {
-                            button ."m-postOverview__commentsButton u-button"
-                                hx-get={"/ui/comments/"(ext_event_id.event_id().to_short())}
-                                hx-target="next .m-postOverview__comments"
-                                hx-swap="outerHTML"
-                            {
-                                span ."m-postOverview__commentsButtonIcon u-buttonIcon" width="1rem" height="1rem" {}
-                                @if reply_count == 1 {
-                                    ("1 Reply".to_string())
-                                } @else {
-                                    (format!("{} Replies", reply_count))
+                    div .m-postOverview__reactions {
+                        (reactions_html)
+                    }
+                    div ."m-postOverview__buttons" {
+                        @if let Some(reply_count) = reply_count {
+                            @if reply_count > 0 {
+                                button ."m-postOverview__commentsButton u-button"
+                                    hx-get={"/ui/comments/"(ext_event_id.event_id().to_short())}
+                                    hx-target="next .m-postOverview__comments"
+                                    hx-swap="outerHTML"
+                                {
+                                    span ."m-postOverview__commentsButtonIcon u-buttonIcon" width="1rem" height="1rem" {}
+                                    @if reply_count == 1 {
+                                        ("1 Reply".to_string())
+                                    } @else {
+                                        (format!("{} Replies", reply_count))
+                                    }
                                 }
                             }
-                        }
 
-                    }
-                    button ."m-postOverview__replyToButton u-button"
-                        disabled[ro.to_disabled()]
-                        hx-get={"/ui/post/reply_to?reply_to="(ext_event_id)}
-                        hx-target=".m-newPostForm__replyToLine"
-                        hx-swap="outerHTML"
-                    {
-                        span ."m-postOverview__replyToButtonIcon u-buttonIcon" width="1rem" height="1rem" {}
-                        "Reply"
+                        }
+                        button ."m-postOverview__replyToButton u-button"
+                            disabled[ro.to_disabled()]
+                            hx-get={"/ui/post/reply_to?reply_to="(ext_event_id)}
+                            hx-target=".m-newPostForm__replyToLine"
+                            hx-swap="outerHTML"
+                        {
+                            span ."m-postOverview__replyToButtonIcon u-buttonIcon" width="1rem" height="1rem" {}
+                            "Reply"
+                        }
                     }
                 }
             }