UX: Make full topic row clickable on mobile (#16440)

app/assets/javascripts/discourse/app/components/topic-list-item.js

@@ -258,6 +258,18 @@ export default Component.extend({
       return this.navigateToTopic(topic, e.target.getAttribute("href"));
     }
 
+    // make full row click target on mobile, due to size constraints
+    if (
+      this.site.mobileView &&
+      (e.target.classList.contains("right") ||
+        e.target.classList.contains("topic-item-stats"))
+    ) {
+      if (wantsNewWindow(e)) {
+        return true;
+      }
+      return this.navigateToTopic(topic, topic.lastUnreadUrl);
+    }
+
     if (e.target.closest("a.topic-status")) {
       this.topic.togglePinnedForUser();
       return false;

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

@@ -38,12 +38,10 @@
         </div>
       {{/unless}}
       {{discourse-tags topic mode="list"}}
-      <div class="pull-right">
+      <div class='num activity last'>
-        <div class='num activity last'>
+        <span class="age activity" title="{{topic.bumpedAtTitle}}"><a
-          <span class="age activity" title="{{topic.bumpedAtTitle}}"><a
+            href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
-              href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
+        </span>
-          </span>
-        </div>
       </div>
       <div class="clearfix"></div>
     </div>

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

@@ -123,10 +123,12 @@
     z-index: z("base") + 1; // Intentionally overlapping category to create bigger tap target
     font-size: var(--font-up-1);
     a.title {
+      display: block;
       color: var(--primary);
-      padding: 0.5em 0 1.2em 0;
+      padding: 0;
     }
     .topic-statuses {
+      padding: 0 0 0.5em 0;
       a {
         line-height: 0.8;
         color: var(--primary-medium);
@@ -134,6 +136,10 @@
     }
   }
 
+  .topic-featured-link {
+    padding: 0;
+  }
+
   .badge-notification,
   .category-topic-link td.num .badge-notification {
     position: relative;
@@ -161,9 +167,13 @@
   }
 
   .topic-item-stats {
+    // disabling clicks because these targets are too small on mobile
+    pointer-events: none;
     position: relative;
-    margin-top: 0.5em;
+    display: flex;
+    align-items: baseline;
     z-index: z("base");
+    margin-top: 0.5em;
     .category,
     .num,
     .last-poster {
@@ -177,14 +187,22 @@
     a:visited {
       color: var(--primary-med-or-secondary-med);
     }
+    .activity {
+      margin-left: auto;
+    }
+    .discourse-tags {
+      display: flex;
+      flex-wrap: nowrap;
+      flex: 0 1 auto;
+      overflow: hidden;
+    }
   }
 
   .age {
     white-space: nowrap;
     a {
-      // let's make all ages dim on mobile so we're not
+      color: var(--primary-600);
-      // overwhelming people with info about each topic
+      font-size: var(--font-down-1);
-      color: var(--primary-low-mid-or-secondary-high) !important;
     }
   }
 }
@@ -441,7 +459,7 @@ td .main-link {
     }
   }
   .num.activity a {
-    padding: 0;
+    padding: 0.5em 0;
   }
   // so the topic excerpt is full width
   // as the containing div is 80%