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>

javascripts/discourse/components/card/topic-activity-column.gjs

@@ -1,6 +1,5 @@
 import Component from "@glimmer/component";
 import concatClass from "discourse/helpers/concat-class";
-import icon from "discourse/helpers/d-icon";
 import formatDate from "discourse/helpers/format-date";
 
 export default class TopicActivityColumn extends Component {

javascripts/discourse/components/card/topic-status-column.gjs

@@ -30,7 +30,9 @@ export default class TopicStatusColumn extends Component {
     {{#if this.badge}}
       <span class="topic-status-card {{this.badge.className}}">{{icon
           this.badge.icon
-        }}<p class="topic-status-card__name">{{i18n (themePrefix this.badge.text)}}</p></span>
+        }}<p class="topic-status-card__name">{{i18n
+            (themePrefix this.badge.text)
+          }}</p></span>
     {{/if}}
   </template>
 }

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);

spec/system/horizon_high_level_spec.rb

@@ -36,9 +36,7 @@ describe "Horizon theme | High level", type: :system do
     expect(topic_item.all("td").map { |el| el["class"] }).to eq(
       [
         "main-link topic-list-data",
-        "topic-status-data",
         "topic-category-data",
-        "topic-likes-replies-data",
         "topic-creator-data",
         "topic-activity-data",
       ],
@@ -50,7 +48,7 @@ describe "Horizon theme | High level", type: :system do
 
     # Can change site colors from the sidebar palette, which are remembered
     # across page reloads.
-    marigold_palette = ColorScheme.find_by(name: "Marigold")
+    marigold_palette = theme.color_schemes.find_by(name: "Marigold")
     palette_selector.open_palette_menu
     palette_selector.click_palette_menu_item(marigold_palette.name)
     expect(palette_selector).to have_no_palette_menu

spec/system/page_objects/components/user_color_palette_selector.rb

@@ -26,7 +26,9 @@ module PageObjects
       end
 
       def has_selected_palette?(palette)
-        has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
+        has_css?(
+          ".user-color-palette-selector-trigger[data-selected-color-palette-id=\"#{palette.id}\"]",
+        )
       end
 
       def has_loaded_css?

spec/system/user_color_palette_selector_spec.rb

@@ -6,7 +6,7 @@ describe "Horizon theme | User color palette selector", type: :system do
   let(:set_theme_as_default) { true }
   let!(:theme) do
     horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
-    ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
+    horizon_theme.color_schemes.update_all(user_selectable: true)
     horizon_theme
   end
   fab!(:current_user) { Fabricate(:user) }
@@ -16,8 +16,8 @@ describe "Horizon theme | User color palette selector", type: :system do
   let(:interface_color_selector) do
     PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
   end
-  let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
-  let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
+  let(:marigold_palette) { theme.color_schemes.find_by(name: "Marigold") }
+  let(:marigold_palette_dark) { theme.color_schemes.find_by(name: "Marigold Dark") }
 
   before { SiteSetting.interface_color_selector = "sidebar_footer" }