UX: fix topic cards layout for messages with has-replies class (#183)

The `grid-template-areas` were not correct on the messages page

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Martin Brennan <martin@discourse.org>

scss/topic-cards.scss

@@ -22,12 +22,12 @@
   flex-direction: column;
   gap: 1.25em;
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     gap: 0.5em;
     padding: 0 0.5em;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     gap: 0;
     padding: 0;
   }
@@ -90,6 +90,12 @@
       grid-template-areas:
         "bulk-select creator title title title status"
         "bulk-select category category activity likes-replies likes-replies";
+
+      @include viewport.until(sm) {
+        grid-template-areas:
+          "bulk-select creator title title title status"
+          "bulk-select . category likes-replies activity . ";
+      }
     }
 
     @include viewport.until(sm) {
@@ -98,14 +104,6 @@
         "bulk-select creator title title title status"
         "bulk-select . category activity activity . ";
     }
-
-    &.has-replies {
-      @include viewport.until(sm) {
-        grid-template-areas:
-          "bulk-select creator title title title status"
-          "bulk-select . category likes-replies activity . ";
-      }
-    }
   }
 
   &:hover {
@@ -204,7 +202,7 @@
       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
     );
 
-    @include breakpoint(tablet) {
+    @include viewport.until(md) {
       padding: 0.25em 0.5rem;
       font-size: var(--font-down-2);
     }
@@ -308,6 +306,7 @@
     align-items: center;
     padding: 0.2em 0.5rem;
     font-size: var(--font-down-2);
+
     @include viewport.from(lg) {
       font-size: var(--font-down-3);
     }
@@ -340,6 +339,7 @@
 
     svg {
       color: var(--status-color);
+
       @include viewport.from(lg) {
         font-size: var(--font-down-1);
       }
@@ -461,7 +461,6 @@
     .topic-status-data {
       display: none;
     }
-
     grid-template-areas:
       "creator title title title dropdown"
       ". category activity activity .";
@@ -529,6 +528,7 @@
       grid-template-areas:
         "creator title title title dropdown"
         "category category activity metadata . ";
+
       @include viewport.until(sm) {
         grid-template-areas:
           "metadata metadata metadata metadata dropdown"
@@ -653,6 +653,10 @@ body.user-messages-page {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto;
 
+    &.has-replies {
+      grid-template-areas: "title activity" "posters .";
+    }
+
     &:hover {
       .discourse-no-touch & {
         background-color: var(--primary-low);