UX: Tweak user deleted posts items (#21856)

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

@@ -28,6 +28,8 @@
   {{else}}
     <ExpandPost @item={{@item}} />
   {{/if}}
+
+  <div class="user-stream-item__metadata">
     <span class="time">{{format-date @item.created_at}}</span>
 
     {{#if @item.deleted_by}}
@@ -42,6 +44,7 @@
         {{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);