UX: Tweak user deleted posts items (#21856)

app/assets/javascripts/discourse/app/components/user-stream-item.hbs

@@ -28,20 +28,23 @@
   {{else}}
     <ExpandPost @item={{@item}} />
   {{/if}}
-  <span class="time">{{format-date @item.created_at}}</span>
 
-  {{#if @item.deleted_by}}
+  <div class="user-stream-item__metadata">
-    <span class="delete-info">
+    <span class="time">{{format-date @item.created_at}}</span>
-      {{d-icon "far-trash-alt"}}
+
-      {{avatar
+    {{#if @item.deleted_by}}
-        @item.deleted_by
+      <span class="delete-info">
-        imageSize="tiny"
+        {{d-icon "far-trash-alt"}}
-        extraClasses="actor"
+        {{avatar
-        ignoreTitle="true"
+          @item.deleted_by
-      }}
+          imageSize="tiny"
-      {{format-date @item.deleted_at leaveAgo="true"}}
+          extraClasses="actor"
-    </span>
+          ignoreTitle="true"
-  {{/if}}
+        }}
+        {{format-date @item.deleted_at leaveAgo="true"}}
+      </span>
+    {{/if}}
+  </div>
 
   <span>
     <PluginOutlet

app/assets/stylesheets/common/components/user-stream-item.scss

@@ -35,6 +35,12 @@
     flex-grow: 1;
   }
 
+  .user-stream-item__metadata {
+    align-items: end;
+    display: flex;
+    flex-direction: column;
+  }
+
   .type,
   span.name {
     color: var(--primary);
@@ -49,15 +55,25 @@
     padding-top: 5px;
   }
 
+  .delete-info {
+    align-items: center;
+    display: flex;
+
+    .d-icon {
+      font-size: var(--font-0);
+      margin-right: 0.5rem;
+    }
+
+    .avatar {
+      margin-right: 0.25rem;
+    }
+  }
+
   .notification .time {
     margin-left: auto;
     float: none;
   }
 
-  .delete-info .d-icon {
-    font-size: var(--font-0);
-  }
-
   .expand-item,
   .collapse-item {
     margin-right: 0.5em;

app/assets/stylesheets/desktop/components/user-stream-item.scss

@@ -1,11 +1,5 @@
 // Desktop styles for "user-stream-item" component
 .user-stream {
-  .time,
-  .delete-info,
-  .draft-type {
-    margin-right: 8px;
-  }
-
   .notification {
     &.unread {
       background-color: var(--tertiary-low);