UI: ensures status and creator are perfectly aligned

assets/javascripts/discourse/widgets/discourse-post-event.js.es6

@@ -142,7 +142,8 @@ export default createWidget("discourse-post-event", {
               <span class="separator">·</span>
             {{/unless}}
             <span class="creators">
-              Created by {{attach widget="discourse-post-event-creator" attrs=(hash user=state.eventModel.creator)}}
+              <span>{{i18n "discourse_post_event.event_ui.created_by"}}</span>
+              {{attach widget="discourse-post-event-creator" attrs=(hash user=state.eventModel.creator)}}
             </span>
           </div>
         </div>

assets/stylesheets/common/discourse-post-event.scss

@@ -88,18 +88,30 @@
       max-width: 45vw;
     }
     .status-and-creators {
-      display: inline-flex;
+      display: flex;
       align-items: center;
-      margin-bottom: 0.25em;
-    }
-    .status-and-creators {
       color: $primary-medium;
       font-size: $font-down-1;
+      margin: 0.25em 0;
 
       .separator {
         margin: 0 0.25em;
       }
 
+      .creators {
+        display: flex;
+        align-items: center;
+
+        .event-creator {
+          margin-left: 0.25em;
+
+          .topic-invitee-avatar {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+
       .status {
         &.expired {
           color: $danger-medium;

config/locales/client.en.yml

@@ -48,6 +48,7 @@ en:
         add_to_calendar: Add to calendar
         send_pm_to_creator: Send PM to %{username}
         edit_event: Edit event
+        created_by: Created by
       invitees_modal:
         title_invited: "List of invited users"
         title_participated: "List of users who participated"