UX: full-width user directory

![CleanShot 2025-06-20 at 09 52
13@2x](https://github.com/user-attachments/assets/213416c6-24a6-41e1-84d2-04d157f11999)
![CleanShot 2025-06-20 at 09 52
25@2x](https://github.com/user-attachments/assets/34384e2c-6f4e-4933-ae35-d47102982db1)

.discourse-compatibility

@@ -0,0 +1,2 @@
+< 3.5.0.beta5-dev: 31249c4f27d93e83c6b83d42d93974522a9a612e
+

Gemfile.lock

@@ -15,16 +15,16 @@ GEM
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
     ast (2.4.3)
-    base64 (0.2.0)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
     concurrent-ruby (1.3.5)
     connection_pool (2.5.3)
-    drb (2.2.1)
+    drb (2.2.3)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.11.3)
-    language_server-protocol (3.17.0.4)
+    json (2.12.2)
+    language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
     logger (1.7.0)
     minitest (5.25.5)
@@ -35,10 +35,10 @@ GEM
     prettier_print (1.2.1)
     prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.13)
+    rack (3.1.15)
     rainbow (3.1.1)
     regexp_parser (2.10.0)
-    rubocop (1.75.4)
+    rubocop (1.76.0)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -46,10 +46,10 @@ GEM
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.44.0, < 2.0)
+      rubocop-ast (>= 1.45.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.44.1)
+    rubocop-ast (1.45.0)
       parser (>= 3.3.7.2)
       prism (~> 1.4)
     rubocop-capybara (2.22.1)
@@ -67,12 +67,12 @@ GEM
     rubocop-factory_bot (2.27.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
-    rubocop-rails (2.31.0)
+    rubocop-rails (2.32.0)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
       rubocop (>= 1.75.0, < 2.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
     rubocop-rspec (3.6.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
@@ -99,4 +99,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.8
+   2.6.9

about.json

@@ -6,9 +6,7 @@
   "learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
   "theme_version": "0.0.1",
   "modifiers": {
-    "svg_icons": [
-      "fire"
-    ],
+    "svg_icons": ["fire"],
     "serialize_topic_is_hot": true
   },
   "color_schemes": {

common/common.scss

@@ -1,6 +1,7 @@
 @import "box-view";
 @import "buttons";
 @import "chat";
+@import "categories-view";
 @import "color-choice";
 @import "composer";
 @import "composer-peek-mode";

common/head_tag.html

@@ -1,6 +1,7 @@
 <script>
-  if(!CSS.supports("(color: hsl(from white h s l))")){
+  if (!CSS.supports("(color: hsl(from white h s l))")) {
     window.unsupportedBrowser = true;
-    window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
+    window.I18n.translations[I18n.locale].js.browser_update =
+      'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
   }
-</script>
+</script>

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

@@ -1,9 +1,6 @@
 import Component from "@glimmer/component";
-import avatar from "discourse/helpers/avatar";
 import concatClass from "discourse/helpers/concat-class";
-import icon from "discourse/helpers/d-icon";
 import formatDate from "discourse/helpers/format-date";
-import { i18n } from "discourse-i18n";
 
 export default class TopicActivityColumn extends Component {
   get topicUser() {
@@ -27,37 +24,25 @@ export default class TopicActivityColumn extends Component {
       };
     } else if (this.args.topic.posts_count === 1) {
       return {
-        user: this.args.topic.creator,
-        username: this.args.topic.creator.username,
-        activityText: "user_posted",
-        class: "--posted",
+        user: this.args.topic.firstPosterUser,
+        username: this.args.topic.last_poster_username,
+        class: "--created",
       };
+    } else {
+      return;
     }
   }
 
   <template>
     <span class={{concatClass "topic-activity" this.topicUser.class}}>
-      <div class="topic-activity__user">
-        {{#if this.topicUser.user}}
-          {{avatar this.topicUser.user imageSize="small"}}
-        {{else}}
-          {{icon "pencil"}}
-        {{/if}}
-      </div>
       {{#if this.topicUser.username}}
         <span
           class="topic-activity__username"
         >{{this.topicUser.username}}</span>
+        <span class="dot-separator"></span>
       {{/if}}
-      <div class="topic-activity__reason">
-        {{i18n (themePrefix this.topicUser.activityText)}}
-      </div>
       <div class="topic-activity__time">
-        {{formatDate
-          @topic.bumpedAt
-          leaveAgo="true"
-          format="medium-with-ago-and-on"
-        }}
+        {{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
       </div>
     </span>
   </template>

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

@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+
+export default class TopicCreatorColumn extends Component {
+  get topicCreator() {
+    return {
+      user: this.args.topic.creator,
+      class: "--topic-creator",
+    };
+  }
+
+  <template>
+    <div class={{this.topicCreator.class}}>
+      {{avatar this.topicCreator.user}}
+    </div>
+  </template>
+}

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

@@ -1,9 +1,12 @@
+import { gt } from "truth-helpers";
 import icon from "discourse/helpers/d-icon";
-import gt from "truth-helpers/helpers/gt";
+import number from "discourse/helpers/number";
 
 const TopicRepliesColumn = <template>
   {{#if (gt @topic.replyCount 1)}}
-    <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
+    <span class="topic-replies">{{icon "reply"}}{{number
+        @topic.posts_count
+      }}</span>
   {{/if}}
 </template>;
 

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
-        }}{{i18n (themePrefix this.badge.text)}}</span>
+        }}<p class="topic-status-card__name">{{i18n
+            (themePrefix this.badge.text)
+          }}</p></span>
     {{/if}}
   </template>
 }

javascripts/discourse/components/sidebar-new-topic-button.gjs

@@ -5,9 +5,8 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { service } from "@ember/service";
-import { gt } from "truth-helpers";
+import { gt, not } from "truth-helpers";
 import CreateTopicButton from "discourse/components/create-topic-button";
-import not from "truth-helpers/helpers/not";
 
 export default class SidebarNewTopicButton extends Component {
   @service composer;

javascripts/discourse/initializers/topic-list-columns.gjs

@@ -1,7 +1,7 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
 import TopicActivityColumn from "../components/card/topic-activity-column";
 import TopicCategoryColumn from "../components/card/topic-category-column";
-import TopicLikesColumn from "../components/card/topic-likes-column";
+import TopicCreatorColumn from "../components/card/topic-creator-column";
 import TopicRepliesColumn from "../components/card/topic-replies-column";
 import TopicStatusColumn from "../components/card/topic-status-column";
 
@@ -23,13 +23,18 @@ const TopicCategory = <template>
   </td>
 </template>;
 
-const TopicLikesReplies = <template>
+const TopicReplies = <template>
   <td class="topic-likes-replies-data">
-    <TopicLikesColumn @topic={{@topic}} />
     <TopicRepliesColumn @topic={{@topic}} />
   </td>
 </template>;
 
+const TopicCreator = <template>
+  <td class="topic-creator-data">
+    <TopicCreatorColumn @topic={{@topic}} />
+  </td>
+</template>;
+
 export default {
   name: "topic-list-customizations",
 
@@ -49,7 +54,11 @@ export default {
           });
 
           columns.add("topic-likes-replies", {
-            item: TopicLikesReplies,
+            item: TopicReplies,
+            after: "topic-author-avatar",
+          });
+          columns.add("topic-creator", {
+            item: TopicCreator,
             after: "topic-author-avatar",
           });
           columns.delete("views");
@@ -76,6 +85,9 @@ export default {
           ) {
             classes.push("--has-status-card");
           }
+          if (context.topic.replyCount > 1) {
+            classes.push("has-replies");
+          }
           return classes;
         }
       );

package.json

@@ -1,11 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.11.1",
-    "ember-template-lint": "7.0.1",
-    "eslint": "9.22.0",
+    "@discourse/lint-configs": "2.25.0",
+    "ember-template-lint": "7.8.1",
+    "eslint": "9.28.0",
     "prettier": "3.5.3",
-    "stylelint": "16.16.0"
+    "stylelint": "16.20.0"
   },
   "engines": {
     "node": ">= 22",

scss/box-view.scss

@@ -1,4 +1,6 @@
-@media screen and (min-width: 1300px) {
+@use "lib/viewport";
+
+@media screen and (width >= 1300px) {
   #main-outlet {
     border-top-right-radius: var(--d-border-radius-large);
     border-top-left-radius: var(--d-border-radius-large);
@@ -20,7 +22,7 @@
 .has-full-page-chat .chat-replying-indicator-container {
   margin-bottom: var(--main-grid-gap);
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
@@ -28,7 +30,7 @@
 .has-full-page-chat .chat-selection-management {
   margin-bottom: var(--main-grid-gap);
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
@@ -40,17 +42,16 @@
   margin: 0;
   padding: 0;
   position: relative;
-  container: content-width / inline-size;
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     display: none;
   }
 
-  @media screen and (max-width: 488px) {
+  @media screen and (width <= 488px) {
     display: none;
   }
 
-  @include breakpoint(tablet) {
+  @include viewport.until(md) {
     display: none;
   }
 
@@ -93,7 +94,7 @@
     bottom: var(--main-grid-gap);
     left: var(--left-distance);
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -103,7 +104,7 @@
     bottom: var(--main-grid-gap);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -117,7 +118,7 @@
     left: var(--left-distance);
     height: var(--main-grid-gap);
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       height: calc(var(--d-border-radius-large) * 2);
     }
 
@@ -157,7 +158,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -166,7 +167,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (width <= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -175,7 +176,7 @@
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (width <= 400px) {
   .with-topic-progress {
     bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
   }

scss/categories-view.scss

@@ -0,0 +1,357 @@
+@use "lib/viewport";
+
+.categories-and-latest {
+  .category-list {
+    border-collapse: separate;
+
+    th.topics {
+      display: none;
+    }
+
+    thead tr th {
+      font-size: var(--font-up-1-rem);
+      font-weight: bold;
+    }
+
+    tbody {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+      padding-top: 1em;
+      border: 0;
+    }
+
+    tbody tr {
+      display: grid;
+      grid-template-areas:
+        "title topics"
+        "category category"
+        "subcategory subcategory";
+      row-gap: 1em;
+      border: 1px solid var(--primary-300);
+      border-radius: var(--d-border-radius-large);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+    }
+
+    td.category {
+      display: contents;
+      border-top-left-radius: var(--d-border-radius-large);
+      border-bottom-left-radius: var(--d-border-radius-large);
+      border-width: 2px;
+      padding: 1em 1.5rem;
+    }
+
+    tbody h3 {
+      grid-area: title;
+      padding: 1em 0 0 1.5rem;
+      font-size: var(--font-up-1-rem);
+
+      .category-name {
+        display: flex;
+        align-self: center;
+      }
+
+      .badge-category {
+        gap: 0.25em;
+        align-items: center;
+        font-size: var(--font-up-1-rem);
+
+        .d-icon:first-of-type:not(.d-icon-lock),
+        &.--style-square::before,
+        &.--style-emoji .emoji {
+          width: 1.25em;
+          height: 1.25em;
+          margin-right: 0.25em;
+        }
+
+        &.--style-square::before {
+          border-radius: 6px;
+        }
+      }
+
+      .d-icon.d-icon-lock {
+        order: 1;
+      }
+    }
+
+    .topics {
+      width: auto;
+      padding: 1em 1.5rem 0 0;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+    }
+
+    .category-description {
+      grid-area: category;
+      padding: 0 1.5rem;
+      margin: 0;
+      font-size: var(--font-down-1-rem);
+    }
+
+    .subcategories {
+      grid-area: subcategory;
+      gap: 0.25em 0.5em;
+      padding: 0 1.5rem 1em;
+      margin: 0;
+
+      .badge-category__wrapper {
+        background-color: light-dark(
+          oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
+          oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+        );
+        padding: 0.25em 0.5rem;
+        border-radius: var(--d-border-radius);
+      }
+
+      .badge-category__name {
+        color: light-dark(
+          oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+          oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+        );
+      }
+
+      .badge-category.--style-square::before {
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .latest-topic-list {
+    .table-heading {
+      border: 0;
+      font-size: var(--font-up-1-rem);
+      font-weight: bold;
+    }
+
+    &-item {
+      display: grid;
+      grid-template-columns: min-content min-content auto min-content;
+      grid-template-areas:
+        "creator title title status"
+        ". category activity activity";
+      grid-column-gap: 0.75rem;
+      grid-row-gap: 0.5rem;
+      background: var(--d-content-background);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+      text-overflow: ellipsis;
+      padding: 0.75em 1rem;
+      border: 1px solid var(--primary-300);
+      border-radius: var(--d-border-radius-large);
+      margin-top: 1em;
+    }
+
+    .main-link,
+    .topic-stats {
+      display: contents;
+    }
+
+    .top-row {
+      grid-area: title;
+    }
+
+    .bottom-row {
+      grid-area: category;
+
+      .discourse-tags {
+        display: none;
+      }
+    }
+
+    .badge-category__wrapper {
+      border-radius: var(--d-border-radius);
+      padding: 0.25em 0.5rem;
+      background-color: light-dark(
+        oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
+        oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+      );
+
+      @include viewport.until(md) {
+        padding: 0.25em 0.5rem;
+        font-size: var(--font-down-2);
+      }
+
+      .badge-category__name {
+        color: light-dark(
+          oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+          oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+        );
+      }
+    }
+
+    .topic-list-data {
+      grid-area: likes-replies;
+    }
+
+    .num.posts-map {
+      display: none;
+    }
+
+    .topic-last-activity {
+      grid-area: activity;
+      display: flex;
+      align-items: center;
+      text-align: left;
+      font-size: var(--font-down-1-rem);
+
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 0.25em;
+        height: 0.25em;
+        background-color: var(--primary-500);
+        border-radius: 100%;
+        margin-right: 0.5em;
+      }
+    }
+
+    .topic-poster {
+      grid-area: creator;
+      width: auto;
+      align-self: flex-start;
+
+      .avatar {
+        height: 24px;
+        width: 24px;
+        border-radius: var(--d-border-radius-small);
+      }
+    }
+  }
+}
+
+@include viewport.until(sm) {
+  .category-list.with-topics {
+    margin-inline: 1rem;
+
+    .num.posts,
+    .category-topics-count {
+      display: none;
+    }
+
+    .category-list {
+      &-item {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+      }
+    }
+
+    tbody {
+      display: flex;
+      flex-direction: column;
+
+      tr:first-of-type {
+        order: -2;
+      }
+
+      tr.subcategories-list {
+        order: -1;
+      }
+
+      tr:nth-last-of-type(2) {
+        border-bottom: 0;
+      }
+    }
+
+    th.main-link {
+      padding-top: 0;
+    }
+  }
+}
+
+.category-boxes.with-subcategories {
+  @include viewport.from(sm) {
+    margin-top: 0;
+  }
+
+  @include viewport.until(md) {
+    padding-inline: 1rem;
+    box-sizing: border-box;
+  }
+
+  .category {
+    border: 0;
+
+    &-box-inner {
+      border-radius: var(--d-border-radius-large);
+      border: 1px solid var(--primary-300);
+      background: var(--d-content-background);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+
+      &:hover {
+        .discourse-no-touch & {
+          border-color: var(--accent-color);
+          background: var(--d-content-background);
+        }
+      }
+
+      &.selected {
+        box-shadow:
+          0 0 0 2px var(--accent-color),
+          0 0 12px 1px var(--topic-card-shadow);
+      }
+    }
+
+    &-details {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      height: 100%;
+    }
+
+    &-box-heading {
+      h3 {
+        text-align: left;
+      }
+
+      .badge-category {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 1em;
+        justify-content: space-between;
+        width: 100%;
+
+        &__wrapper {
+          display: flex;
+        }
+
+        &.--style-square::before {
+          aspect-ratio: 1 / 1;
+          height: auto;
+          width: 13%;
+          border-radius: var(--d-border-radius);
+        }
+
+        &__name {
+          flex-basis: 100%;
+          font-size: var(--font-up-1-rem);
+        }
+
+        .d-icon:not(.d-icon-lock),
+        img.emoji {
+          aspect-ratio: 1 / 1;
+          height: auto;
+          width: 13%;
+        }
+      }
+    }
+
+    .description {
+      text-align: left;
+      margin: 0;
+      font-size: var(--font-down-1-rem);
+    }
+
+    .subcategories {
+      margin-top: auto;
+      row-gap: 0.5em;
+
+      .subcategory {
+        margin-bottom: 0;
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+}

scss/chat.scss

@@ -5,7 +5,9 @@
 }
 
 .c-navbar-container {
-  padding: 0 1.5em;
+  .full-page-chat & {
+    padding: 0 1.5em;
+  }
   background-color: var(--d-content-background);
 }
 
@@ -21,6 +23,10 @@ body.has-full-page-chat {
   .chat-drawer.is-expanded & {
     border: none;
   }
+
+  .c-navbar__title {
+    padding-left: 0.33em; // visual alignment for chat index, which does not havea a backarrow
+  }
 }
 
 .chat-drawer-outlet-container {

scss/color-exploration.scss

@@ -6,7 +6,7 @@
   --d-sidebar-header-icon-color: var(--d-sidebar-link-color);
   --d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
   --d-sidebar-background: var(--background-color);
-  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
+  --d-sidebar-footer-fade: rgb(var(--tertiary-50-rgb), 1);
   --d-sidebar-prefix-background: var(--d-selected);
   --d-sidebar-active-prefix-background: light-dark(
     oklch(from var(--d-selected) calc(l * 0.85) c h),

scss/composer-peek-mode.scss

@@ -2,7 +2,7 @@
   display: none;
 }
 
-@media screen and (min-width: 1300px) {
+@media screen and (width >= 1300px) {
   html:not(.fullscreen-composer) {
     .peek-mode-toggle svg {
       transform: scaleX(-1);

scss/composer.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 #reply-control
   .select-kit.dropdown-select-box.composer-actions
   .select-kit-header {
@@ -12,7 +14,7 @@
 }
 
 #reply-control.hide-preview:not(.draft) {
-  @include breakpoint("mobile-extra-large", $rule: min-width) {
+  @include viewport.from(sm) {
     background: var(--d-content-background);
     border-top-right-radius: var(--d-border-radius);
     border-top-left-radius: var(--d-border-radius);

scss/desktop-full-width.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 // Full width layout. Ported from the Discourse Full Width theme component here
 // https://meta.discourse.org/t/discourse-full-width-component/292496, which we
 // intend to move into core over time.
@@ -23,7 +25,7 @@ $sidebar-width: 17em;
   body:not(.has-sidebar-page) & {
     max-width: unset;
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       max-width: 25vw;
     }
   }
@@ -103,7 +105,7 @@ $sidebar-width: 17em;
         grid-area: extra-info;
         white-space: nowrap;
 
-        @include breakpoint("tablet") {
+        @include viewport.until(md) {
           display: none;
         }
       }
@@ -127,7 +129,7 @@ $sidebar-width: 17em;
         // at narrower widths, when 1fr = 0
         // we can center without matching the sidebar's width
         // which allows the title to take up the remaining width
-        @media screen and (max-width: 1400px) {
+        @media screen and (width <= 1400px) {
           grid-template-columns:
             calc(var(--d-sidebar-width) - 11px)
             1fr
@@ -136,7 +138,7 @@ $sidebar-width: 17em;
             auto;
         }
 
-        @media screen and (max-width: 1000px) {
+        @media screen and (width <= 1000px) {
           gap: 0.5em;
         }
 
@@ -189,11 +191,11 @@ $sidebar-width: 17em;
 .header-search--enabled .floating-search-input-wrapper {
   grid-area: extra-info;
 
-  @include breakpoint(tablet) {
+  @include viewport.until(md) {
     grid-area: rspace;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     display: none;
   }
 }
@@ -208,7 +210,7 @@ body.has-sidebar-page {
     padding: 0;
   }
 
-  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
+  @media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
     #reply-control.show-preview {
       margin-left: auto;
       margin-right: auto;
@@ -219,7 +221,7 @@ body.has-sidebar-page {
     }
   }
 
-  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
+  @media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
     #reply-control.show-preview:not(.fullscreen) {
       margin-left: $sidebar-width;
       width: auto;
@@ -265,7 +267,7 @@ body.sidebar-animate {
 }
 
 // provides some extra space for login buttons
-@media screen and (min-width: 1400px) {
+@media screen and (width >= 1400px) {
   .anon {
     .d-header .panel {
       grid-column-start: -4;

scss/desktop-horizon-fixes.scss

@@ -1,8 +1,8 @@
 // Fixing bulk select (only needed for desktop)
 .bulk-select-enabled {
-  .topic-list-header .topic-list-data.default {
-    position: sticky;
-    top: 10em;
+  .topic-list-header {
+    position: relative;
+    top: 0;
   }
 
   .topic-author-avatar-data {
@@ -13,7 +13,7 @@
     grid-area: bulk-select;
     margin-left: -0.5em;
 
-    @media screen and (max-width: 576px) {
+    @media screen and (width <= 576px) {
       margin-top: 0;
 
       label {
@@ -47,19 +47,19 @@
     }
   }
 
+  // bulk select
   .bulk-select-topics {
     position: absolute;
-    right: -1em;
+    right: 0;
     background: var(--secondary);
     border-radius: 0 0 0 var(--d-border-radius);
-    padding: 1em;
-
-    @media screen and (max-width: 1048px) {
-      right: 0;
-    }
+    display: flex;
+    gap: 0.5rem;
+    margin: 0.5rem;
 
     button {
       white-space: nowrap;
+      margin: 0;
     }
   }
 }

scss/header.scss

@@ -1,8 +1,10 @@
+@use "lib/viewport";
+
 .d-header {
   box-shadow: none;
   background: var(--background-color);
 
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     padding-bottom: var(--main-grid-gap);
   }
 }

scss/hiddenstuff.scss

@@ -2,8 +2,6 @@
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,
-.more-topics__browse-more,
-// footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
-.footer-message {
+.more-topics__browse-more {
   display: none;
 }

scss/main.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 :root {
   --main-grid-gap: 0.5em;
 }
@@ -5,7 +7,7 @@
 html:not(:has(.has-full-page-chat)) {
   background-color: var(--background-color);
 
-  @include breakpoint("mobile-extra-large") {
+  @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
@@ -13,7 +15,7 @@ html:not(:has(.has-full-page-chat)) {
 body {
   -webkit-font-smoothing: antialiased;
 
-  @include breakpoint("mobile-extra-large") {
+  @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
@@ -35,7 +37,7 @@ body.has-full-page-chat:not(.has-sidebar-page) {
   #main-outlet-wrapper {
     gap: var(--main-grid-gap);
 
-    @include breakpoint(medium) {
+    @include viewport.until(lg) {
       gap: 0;
     }
   }
@@ -50,22 +52,22 @@ body.has-sidebar-page #main-outlet-wrapper {
 }
 
 body:not(.has-sidebar-page) #main-outlet-wrapper {
-  @include breakpoint(medium, $rule: min-width) {
+  @include viewport.from(lg) {
     grid-template-columns: 0 minmax(0, 1fr) 0;
   }
 }
 
 body:not(.has-full-page-chat, .wizard) {
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     background-color: var(--background-color);
   }
 
   #main-outlet-wrapper {
-    @include breakpoint(medium) {
+    @include viewport.until(lg) {
       --main-grid-gap: 0;
     }
 
-    @media screen and (min-width: 768px) {
+    @media screen and (width >= 768px) {
       gap: var(--main-grid-gap);
     }
 
@@ -76,7 +78,7 @@ body:not(.has-full-page-chat, .wizard) {
       border-radius: var(--d-border-radius-large);
       background-color: var(--d-content-background);
 
-      @include breakpoint(medium) {
+      @include viewport.until(lg) {
         border-radius: 0;
       }
 
@@ -85,7 +87,7 @@ body:not(.has-full-page-chat, .wizard) {
       }
 
       > *:not(.experimental-screen, .activate-account) {
-        @include breakpoint(medium, $rule: min-width) {
+        @include viewport.from(lg) {
           box-sizing: border-box;
           max-width: 1000px;
           margin-inline: auto;
@@ -96,9 +98,22 @@ body:not(.has-full-page-chat, .wizard) {
   }
 }
 
+body.users-page {
+  // very specific to overcome the above rules
+  #main #main-outlet-wrapper #main-outlet > section {
+    max-width: unset;
+  }
+}
+
+@include viewport.until(sm) {
+  .welcome-banner {
+    display: none;
+  }
+}
+
 #list-area {
   .show-more.has-topics {
-    @include breakpoint(medium, $rule: min-width) {
+    @include viewport.from(lg) {
       width: auto;
       right: 50%;
       transform: translateX(50%);

scss/misc.scss

@@ -71,7 +71,7 @@ input[type="color"]:focus,
   background-color: var(--background-color);
 }
 
-@include breakpoint(mobile-extra-large) {
+@include viewport.until(sm) {
   // pinned topic excerpts are hidden on small screens too
   .fk-d-menu__trigger.topic-list-layout-trigger {
     display: none;

scss/mobile-stuff.scss

@@ -1,5 +1,7 @@
+@use "lib/viewport";
+
 // temp separate file to avoid merge hell… to be distributed later
-@include breakpoint(medium) {
+@include viewport.until(lg) {
   html,
   .d-header {
     background-color: var(--d-content-background);
@@ -8,19 +10,19 @@
 
 #main-outlet-wrapper {
   *[class*="navigation-"] & {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding: 0;
     }
   }
 }
 
 #main-outlet {
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     padding-top: var(--spacing-block-sm);
   }
 
   .list-controls {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(
         --spacing-inline-m
       ) !important; // override will be fixed when the whole chat page shenanigans is resolved
@@ -29,14 +31,13 @@
     }
 
     .navigation-container {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         gap: var(--spacing-inline-s);
 
-        // don't know why we even hide this crucial navigation on mobile
         .category-breadcrumb.hidden,
         .category-breadcrumb {
           display: flex !important;
-          column-gap: var(--spacing-inline-s);
+          column-gap: var(--spacing-inline-m);
           row-gap: var(--spacing-block-xs);
           flex-basis: 100%;
 
@@ -47,9 +48,12 @@
             ); // 2px is width of the outline
           }
 
+          .select-kit-header-wrapper {
+            gap: 0.25em;
+          }
+
           .select-kit-header {
             background: var(--d-content-background);
-            border: 0;
           }
         }
 
@@ -77,13 +81,13 @@
       #navigation-bar,
       .navigation-controls,
       .category-breadcrumb {
-        @include breakpoint(mobile-extra-large) {
+        @include viewport.until(sm) {
           margin-bottom: 0;
         }
       }
 
       .navigation-controls {
-        @include breakpoint(mobile-extra-large) {
+        @include viewport.until(sm) {
           gap: var(--spacing-inline-s);
         }
       }
@@ -91,12 +95,12 @@
   }
 
   .list-container {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: 0 !important;
     }
 
     .topic-list-body {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         border-top: 0;
         padding-top: 0;
       }
@@ -104,7 +108,7 @@
   }
 
   #topic-title {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-s) !important;
 
       .title-wrapper {
@@ -158,7 +162,7 @@
   }
 
   .container.posts {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-xs) !important;
 
       .main-avatar .avatar {
@@ -197,7 +201,7 @@
   }
 
   #topic-footer-buttons {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-xs) !important;
     }
   }

scss/nav-pills.scss

@@ -17,7 +17,7 @@
   .combo-box .combo-box-header {
     // needs more specificity than just in the button file
     background-color: var(--secondary);
-    border-radius: var(--d-border-radius-large);
+    border-radius: var(--d-border-radius);
     border: 1px solid var(--primary-300);
 
     &:hover {

scss/sidebar.scss

@@ -2,7 +2,7 @@
 
 .sidebar-wrapper,
 .sidebar-hamburger-dropdown {
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     background: var(--secondary);
 
     .sidebar-footer-wrapper {
@@ -38,11 +38,11 @@
 }
 
 .sidebar-section-wrapper {
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     padding-block: 0.45em;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     .hamburger-panel .revamped & {
       margin-bottom: var(--spacing-block-m);
     }
@@ -57,7 +57,7 @@
     display: flex;
     flex-direction: column;
 
-    @include breakpoint(extra-large, $rule: min-width) {
+    @include viewport.from(xl) {
       gap: var(--spacing-block-xs);
     }
   }

scss/topic.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .post-stream {
   .contents {
     font-size: var(--font-up-1);
@@ -6,14 +8,6 @@
   }
 }
 
-.container.posts .topic-navigation:not(.with-topic-progress) {
-  // super fragile because new sticky topic title doesn't have a calculated value (= 53px with this font and size but…)
-  top: calc(
-    var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
-  );
-  z-index: 300;
-}
-
 .timeline-container .topic-timeline {
   min-width: unset; // why we have this?
 
@@ -21,7 +15,7 @@
     border-left: 1px solid var(--accent-color);
 
     .timeline-scroller {
-      @include breakpoint("medium", $rule: min-width) {
+      @include viewport.from(lg) {
         margin-left: -4.5px;
         background: var(--d-content-background);
         height: 40px !important; // height is coming from element style have no other choice
@@ -36,7 +30,7 @@
     .timeline-handle {
       background-color: var(--accent-color);
 
-      @include breakpoint("medium", $rule: min-width) {
+      @include viewport.from(lg) {
         width: 8px;
         border-radius: 10px;
         height: calc(100% - 6px);
@@ -47,7 +41,7 @@
 
 // should probably get rid of this extra specificity class in core?
 .timeline-container.timeline-fullscreen {
-  @include breakpoint("medium", $rule: max-width) {
+  @include viewport.until(lg) {
     .topic-timeline
       .timeline-scrollarea
       .timeline-scroller
@@ -60,7 +54,7 @@
 .container.posts {
   grid-template-columns: auto 8em;
 
-  @media screen and (max-width: 924px) {
+  @media screen and (width <= 924px) {
     grid-template-columns: auto auto;
   }
 

scss/welcome-banner.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .welcome-banner {
   &__wrap {
     display: grid;
@@ -9,11 +11,11 @@
     padding: 1.5em 0 2.5em;
     margin-bottom: 0;
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       padding: 1em;
     }
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       display: block;
       padding: 0.5em;
       margin-top: 0;
@@ -25,22 +27,22 @@
       width: 100%;
       align-self: center;
 
-      @media screen and (max-width: 1028px) {
+      @media screen and (width <= 1028px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @media screen and (max-width: 768px) {
+      @media screen and (width <= 768px) {
         grid-column: 2/-1;
         grid-row: 1/-1;
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @include breakpoint("mobile-extra-large") {
+      @include viewport.until(sm) {
         display: none;
       }
     }
@@ -54,7 +56,7 @@
   .search-menu-container .search-input {
     background: var(--d-content-background);
     border: 1px solid var(--search-color);
-    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
+    box-shadow: 0 4px 10px rgb(52, 6, 121, 15%);
   }
 
   .search-menu .search-input:focus-within,
@@ -86,7 +88,7 @@
     font-weight: 400;
     color: var(--search-color);
 
-    @media screen and (max-width: 1028px) {
+    @media screen and (width <= 1028px) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
       grid-row: 1;
@@ -94,21 +96,21 @@
       margin-bottom: 0.5em;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       text-align: left;
       grid-column: 1/2;
       grid-row: 1/-1;
       font-size: var(--font-up-3);
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       grid-column: 1/-1;
       grid-row: 1;
       text-align: center;
       margin-bottom: 0.5em;
     }
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       font-size: var(--font-up-2);
     }
   }

spec/system/horizon_high_level_spec.rb

@@ -36,9 +36,8 @@ 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",
       ],
     )
@@ -49,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" }