UX: allow tags to wrap under categories on mobile (#20187)

app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr

@@ -38,13 +38,13 @@
       {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
     </div>
     <div class="topic-item-stats clearfix">
-      {{#unless hideCategory}}
-        {{~raw-plugin-outlet name="topic-list-before-category"}}
-        <div class='category'>
-          {{category-link topic.category}}
-        </div>
-      {{/unless}}
-      {{discourse-tags topic mode="list"}}
+      <span class="topic-item-stats__category-tags">
+        {{#unless hideCategory}}
+          {{~raw-plugin-outlet name="topic-list-before-category"}}
+          {{category-link topic.category~}}
+        {{~/unless}}
+        {{~discourse-tags topic mode="list"}}
+      </span>
       <div class='num activity last'>
         <span class="age activity" title="{{topic.bumpedAtTitle}}"><a
             href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>

app/assets/stylesheets/common/base/tagging.scss

@@ -148,20 +148,6 @@
   }
 }
 
-.mobile-view .topic-list-item .discourse-tags {
-  display: inline-flex;
-  flex-wrap: wrap;
-  font-size: var(--font-down-1);
-  margin-top: 0;
-  .discourse-tag {
-    margin-right: 0.2em;
-  }
-  .discourse-tag.box {
-    position: relative;
-    top: 0;
-  }
-}
-
 header .discourse-tag {
   color: var(--primary-medium);
 }

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

@@ -162,11 +162,6 @@
   }
 
   .topic-item-stats {
-    .category,
-    .discourse-tags {
-      // disabling clicks because these targets are too small on mobile
-      pointer-events: none;
-    }
     position: relative;
     display: flex;
     align-items: baseline;
@@ -186,6 +181,47 @@
     }
   }
 
+  .topic-item-stats {
+    span.relative-date {
+      vertical-align: text-top;
+    }
+  }
+
+  .topic-item-stats__category-tags {
+    margin-right: 0.5em;
+    .category,
+    .discourse-tags {
+      display: inline;
+      // disabling clicks because these targets are too small on mobile
+      pointer-events: none;
+    }
+
+    .discourse-tags .discourse-tag {
+      margin: 0;
+    }
+
+    .badge-wrapper {
+      vertical-align: bottom;
+    }
+
+    .badge-wrapper {
+      &.bullet {
+        + .discourse-tags {
+          .discourse-tag {
+            vertical-align: bottom;
+          }
+        }
+      }
+      &.box {
+        + .discourse-tags {
+          .discourse-tag {
+            vertical-align: text-bottom;
+          }
+        }
+      }
+    }
+  }
+
   .age {
     white-space: nowrap;
     a {