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

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

@@ -258,18 +258,6 @@ 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,10 +38,12 @@
         </div>
       {{/unless}}
       {{discourse-tags topic mode="list"}}
-      <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>
-        </span>
+      <div class="pull-right">
+        <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>
+          </span>
+        </div>
       </div>
       <div class="clearfix"></div>
     </div>

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

@@ -117,10 +117,6 @@
     max-width: 300px;
   }
 
-  .avatar {
-    margin-top: 0.15em;
-  }
-
   .main-link {
     line-height: $line-height-medium;
     position: relative;
@@ -128,10 +124,9 @@
     font-size: var(--font-up-1);
     a.title {
       color: var(--primary);
-      padding: 0;
+      padding: 0.5em 0 1.2em 0;
     }
     .topic-statuses {
-      padding: 0;
       a {
         line-height: 0.8;
         color: var(--primary-medium);
@@ -166,13 +161,9 @@
   }
 
   .topic-item-stats {
-    // disabling clicks because these targets are too small on mobile
-    pointer-events: none;
     position: relative;
-    display: flex;
-    align-items: baseline;
-    z-index: z("base");
     margin-top: 0.5em;
+    z-index: z("base");
     .category,
     .num,
     .last-poster {
@@ -186,22 +177,14 @@
     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 {
-      color: var(--primary-600);
-      font-size: var(--font-down-1);
+      // let's make all ages dim on mobile so we're not
+      // overwhelming people with info about each topic
+      color: var(--primary-low-mid-or-secondary-high) !important;
     }
   }
 }
@@ -458,7 +441,7 @@ td .main-link {
     }
   }
   .num.activity a {
-    padding: 0.5em 0;
+    padding: 0;
   }
   // so the topic excerpt is full width
   // as the containing div is 80%