UX: Adjust bulk select action placement

.discourse-compatibility

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

Gemfile.lock

@@ -1,9 +1,8 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (8.0.2)
+    activesupport (7.2.1.1)
       base64
-      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
@@ -13,83 +12,68 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
-      uri (>= 0.13.1)
+    ast (2.4.2)
-    ast (2.4.3)
+    base64 (0.2.0)
-    base64 (0.3.0)
+    bigdecimal (3.1.8)
-    benchmark (0.4.1)
+    concurrent-ruby (1.3.4)
-    bigdecimal (3.2.2)
+    connection_pool (2.4.1)
-    concurrent-ruby (1.3.5)
+    drb (2.2.1)
-    connection_pool (2.5.3)
+    i18n (1.14.6)
-    drb (2.2.3)
-    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.12.2)
+    json (2.7.2)
-    language_server-protocol (3.17.0.5)
+    language_server-protocol (3.17.0.3)
-    lint_roller (1.1.0)
+    logger (1.6.1)
-    logger (1.7.0)
+    minitest (5.25.1)
-    minitest (5.25.5)
+    parallel (1.26.3)
-    parallel (1.27.0)
+    parser (3.3.5.0)
-    parser (3.3.8.0)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
-    prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.15)
+    rack (3.1.10)
     rainbow (3.1.1)
-    regexp_parser (2.10.0)
+    regexp_parser (2.9.2)
-    rubocop (1.76.0)
+    rubocop (1.67.0)
       json (~> 2.3)
-      language_server-protocol (~> 3.17.0.2)
+      language_server-protocol (>= 3.17.0)
-      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 2.9.3, < 3.0)
+      regexp_parser (>= 2.4, < 3.0)
-      rubocop-ast (>= 1.45.0, < 2.0)
+      rubocop-ast (>= 1.32.2, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 4.0)
+      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.45.0)
+    rubocop-ast (1.32.3)
-      parser (>= 3.3.7.2)
+      parser (>= 3.3.1.0)
-      prism (~> 1.4)
+    rubocop-capybara (2.21.0)
-    rubocop-capybara (2.22.1)
+      rubocop (~> 1.41)
-      lint_roller (~> 1.1)
+    rubocop-discourse (3.8.2)
-      rubocop (~> 1.72, >= 1.72.1)
-    rubocop-discourse (3.12.1)
       activesupport (>= 6.1)
-      lint_roller (>= 1.1.0)
+      rubocop (>= 1.59.0)
-      rubocop (>= 1.73.2)
+      rubocop-capybara (>= 2.0.0)
-      rubocop-capybara (>= 2.22.0)
+      rubocop-factory_bot (>= 2.0.0)
-      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.25.0)
-      rubocop-rails (>= 2.30.3)
       rubocop-rspec (>= 3.0.1)
-      rubocop-rspec_rails (>= 2.31.0)
+      rubocop-rspec_rails (>= 2.30.0)
-    rubocop-factory_bot (2.27.1)
+    rubocop-factory_bot (2.26.1)
-      lint_roller (~> 1.1)
+      rubocop (~> 1.61)
-      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.26.2)
-    rubocop-rails (2.32.0)
       activesupport (>= 4.2.0)
-      lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.75.0, < 2.0)
+      rubocop (>= 1.52.0, < 2.0)
-      rubocop-ast (>= 1.44.0, < 2.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (3.6.0)
+    rubocop-rspec (3.1.0)
-      lint_roller (~> 1.1)
+      rubocop (~> 1.61)
-      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rspec_rails (2.30.0)
-    rubocop-rspec_rails (2.31.0)
+      rubocop (~> 1.61)
-      lint_roller (~> 1.1)
+      rubocop-rspec (~> 3, >= 3.0.1)
-      rubocop (~> 1.72, >= 1.72.1)
-      rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
-    securerandom (0.4.1)
+    securerandom (0.3.1)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (3.1.4)
+    unicode-display_width (2.6.0)
-      unicode-emoji (~> 4.0, >= 4.0.4)
-    unicode-emoji (4.0.4)
-    uri (1.0.3)
 
 PLATFORMS
   ruby
@@ -99,4 +83,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.9
+   2.5.21

about.json

@@ -130,6 +130,5 @@
       "header_primary": "ffffff",
       "hover": "584B3E"
     }
-  },
+  }
-  "screenshots": ["screenshots/light.png", "screenshots/dark.png"]
 }

common/color_definitions.scss

@@ -1,7 +1,6 @@
 html {
   --accent-color: #{$tertiary} !important;
-  --accent-text-color: #fff;
+  --accent-text-color: #ffffff;
-
   // Background Colors
   --background-color: light-dark(
     oklch(from #{$tertiary} 96% calc(c * 0.125) h),
@@ -11,7 +10,6 @@ html {
     oklch(from #{$secondary} calc(2 * l) c h),
     oklch(from #{$secondary} l c h)
   ) !important;
-
   // HeaderColors
   --header_primary-low-mid: light-dark(
     oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
@@ -42,14 +40,17 @@ html {
     oklch(from #{$tertiary} 92% calc(c * 0.5) h),
     oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
   ) !important;
+
   --d-nav-color--active: light-dark(
     oklch(from #{$tertiary} l c h),
     oklch(from #{$tertiary} calc(l * 1.2) c h)
   ) !important;
+
   --d-nav-color--hover: light-dark(
     oklch(from #{$tertiary} l c h),
     oklch(from #{$tertiary} calc(l * 1.2) c h)
   ) !important;
+
   --link-color: light-dark(
     oklch(from #{$tertiary} l c h),
     oklch(from #{$tertiary} calc(l * 0.95) c h)
@@ -77,6 +78,7 @@ html {
     oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
     oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
   ) !important;
+
   --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
   --d-sidebar-highlight-hover-background: var(--d-selected) !important;
   --d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;

common/head_tag.html

@@ -1,7 +1,6 @@
 <script>
   if(!CSS.supports("(color: hsl(from white h s l))")){
     window.unsupportedBrowser = true;
-    window.I18n.translations[I18n.locale].js.browser_update =
+    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>.';
-      '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>

javascripts/discourse/api-initializers/hamburger-click-outside-transformer.js

@@ -1,10 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-
-export default apiInitializer("0.8", (api) => {
-  api.registerValueTransformer(
-    "hamburger-dropdown-click-outside-exceptions",
-    ({ value }) => {
-      return [...value, ".topic-drafts-menu-content"];
-    }
-  );
-});

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

@@ -1,7 +1,9 @@
 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() {
@@ -25,34 +27,37 @@ export default class TopicActivityColumn extends Component {
       };
     } else if (this.args.topic.posts_count === 1) {
       return {
-        user: this.args.topic.firstPosterUser,
+        user: this.args.topic.creator,
-        username: this.args.topic.last_poster_username,
+        username: this.args.topic.creator.username,
-        class: "--created",
+        activityText: "user_posted",
+        class: "--posted",
       };
-    } else {
-      return;
     }
   }
 
   <template>
     <span class={{concatClass "topic-activity" this.topicUser.class}}>
-      <div class="topic-activity__type">
+      <div class="topic-activity__user">
         {{#if this.topicUser.user}}
-          {{icon "reply"}}
+          {{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="tiny"}}
+        {{formatDate
+          @topic.bumpedAt
+          leaveAgo="true"
+          format="medium-with-ago-and-on"
+        }}
       </div>
     </span>
   </template>

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

@@ -1,19 +0,0 @@
-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,
-      username: this.args.topic.creator.username,
-      class: "--topic-creator",
-    };
-  }
-
-  <template>
-    <div class={{this.topicUser.class}}>
-      {{avatar this.topicCreator.user}}
-      <span class="topic-creator__username">{{this.topicUser.username}}</span>
-    </div>
-  </template>
-}

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

@@ -1,5 +1,5 @@
-import { gt } from "truth-helpers";
 import icon from "discourse/helpers/d-icon";
+import gt from "truth-helpers/helpers/gt";
 
 const TopicRepliesColumn = <template>
   {{#if (gt @topic.replyCount 1)}}

javascripts/discourse/components/experimental-screen.gjs

@@ -10,7 +10,6 @@ const DO_NOT_RENDER_LIST = ["login"];
 
 export default class ExperimentalScreen extends Component {
   @service router;
-
   @tracked left = 0;
   @tracked right = 0;
   resizeObserver;

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

@@ -3,18 +3,16 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 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, not } from "truth-helpers";
+import { gt } 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;
   @service currentUser;
   @service siteSettings;
   @service router;
-  @service header;
-  @service appEvents;
 
   @tracked category;
   @tracked tag;
@@ -76,30 +74,12 @@ export default class SidebarNewTopicButton extends Component {
     this.tag = this.router.currentRoute.attributes?.tag || null;
   }
 
-  @action
-  watchForComposer() {
-    // this covers opening drafts from the hamburger menu
-    this.appEvents.on("composer:will-open", this, this.closeHamburger);
-  }
-
-  @action
-  stopWatchingForComposer() {
-    this.appEvents.off("composer:will-open", this, this.closeHamburger);
-  }
-
-  @action
-  closeHamburger() {
-    this.header.hamburgerVisible = false;
-  }
-
   <template>
     {{#if this.shouldRender}}
       <div
         class="sidebar-new-topic-button__wrapper"
         {{didInsert this.getCategoryandTag}}
         {{didUpdate this.getCategoryandTag this.router.currentRoute}}
-        {{didInsert this.watchForComposer}}
-        {{willDestroy this.stopWatchingForComposer}}
       >
         <CreateTopicButton
           @canCreateTopic={{this.canCreateTopic}}

javascripts/discourse/components/user-color-palette-selector.gjs

@@ -31,14 +31,13 @@ export default class UserColorPaletteSelector extends Component {
   @service site;
   @service session;
   @service interfaceColor;
-
   @tracked anonColorPaletteId = this.#loadAnonColorPalette();
   @tracked userColorPaletteId = this.session.userColorSchemeId;
   @tracked cssLoaded = true;
 
   get userColorPalettes() {
     const availablePalettes = listColorSchemes(this.site)
-      ?.map((userPalette) => {
+      .map((userPalette) => {
         return {
           ...userPalette,
           accent: `#${
@@ -56,7 +55,7 @@ export default class UserColorPaletteSelector extends Component {
     // Match the light scheme with the corresponding dark id based in the name
     return (
       availablePalettes
-        ?.map((palette) => {
+        .map((palette) => {
           if (palette.is_dark) {
             return palette;
           }

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

@@ -1,7 +1,6 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
 import TopicActivityColumn from "../components/card/topic-activity-column";
 import TopicCategoryColumn from "../components/card/topic-category-column";
-import TopicCreatorColumn from "../components/card/topic-creator-column";
 import TopicLikesColumn from "../components/card/topic-likes-column";
 import TopicRepliesColumn from "../components/card/topic-replies-column";
 import TopicStatusColumn from "../components/card/topic-status-column";
@@ -31,12 +30,6 @@ const TopicLikesReplies = <template>
   </td>
 </template>;
 
-const TopicCreator = <template>
-  <td class="topic-creator-data">
-    <TopicCreatorColumn @topic={{@topic}} />
-  </td>
-</template>;
-
 export default {
   name: "topic-list-customizations",
 
@@ -59,10 +52,6 @@ export default {
             item: TopicLikesReplies,
             after: "topic-author-avatar",
           });
-          columns.add("topic-creator", {
-            item: TopicCreator,
-            after: "topic-author-avatar",
-          });
           columns.delete("views");
           columns.delete("replies");
           if (!router.currentRouteName.includes("userPrivateMessages")) {
@@ -94,34 +83,6 @@ export default {
       api.registerValueTransformer("topic-list-item-mobile-layout", () => {
         return false;
       });
-
-      api.registerBehaviorTransformer(
-        "topic-list-item-click",
-        ({ context: { event }, next }) => {
-          if (event.target.closest("a, button, input")) {
-            return next();
-          }
-
-          event.preventDefault();
-          event.stopPropagation();
-
-          const topicLink = event.target
-            .closest("tr")
-            .querySelector("a.raw-topic-link");
-
-          // Redespatch the click on the topic link, so that all key-handing is sorted
-          topicLink.dispatchEvent(
-            new MouseEvent("click", {
-              ctrlKey: event.ctrlKey,
-              metaKey: event.metaKey,
-              shiftKey: event.shiftKey,
-              button: event.button,
-              bubbles: true,
-              cancelable: true,
-            })
-          );
-        }
-      );
     });
   },
 };

locales/en.yml

@@ -6,3 +6,4 @@ en:
   user_replied: "replied"
   user_posted: "posted"
   user_updated: "updated"
+

package.json

@@ -1,14 +1,13 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.25.0",
+    "@discourse/lint-configs": "2.4.0",
-    "ember-template-lint": "7.8.1",
+    "ember-template-lint": "6.1.0",
-    "eslint": "9.28.0",
+    "eslint": "9.19.0",
-    "prettier": "3.5.3",
+    "prettier": "2.8.8"
-    "stylelint": "16.20.0"
   },
   "engines": {
-    "node": ">= 22",
+    "node": ">= 18",
     "npm": "please-use-pnpm",
     "yarn": "please-use-pnpm",
     "pnpm": "9.x"

scss/box-view.scss

@@ -1,6 +1,4 @@
-@use "lib/viewport";
+@media screen and (min-width: 1300px) {
-
-@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);
@@ -21,46 +19,40 @@
 
 .has-full-page-chat .chat-replying-indicator-container {
   margin-bottom: var(--main-grid-gap);
-
+  @include breakpoint(medium) {
-  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
 
 .has-full-page-chat .chat-selection-management {
   margin-bottom: var(--main-grid-gap);
-
+  @include breakpoint(medium) {
-  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
 
 .experimental-screen {
+  @include breakpoint(medium) {
+    display: none;
+  }
   max-width: unset !important;
   width: 100%;
   display: block;
   margin: 0;
   padding: 0;
   position: relative;
-
+  container: content-width / inline-size;
-  @include viewport.until(lg) {
+  @media screen and (max-width: 488px) {
     display: none;
   }
-
+  @include breakpoint(tablet) {
-  @media screen and (width <= 488px) {
     display: none;
   }
-
-  @include viewport.until(md) {
-    display: none;
-  }
-
   li {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-
   &__top-left,
   &__top-right,
   &__bottom-left,
@@ -76,39 +68,38 @@
       transparent var(--d-border-radius-large),
       black var(--d-border-radius-large)
     );
+    -webkit-mask: radial-gradient(
+      circle at var(--d-border-radius-large) var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      black var(--d-border-radius-large)
+    );
   }
-
   &__top-left {
     top: var(--header-offset);
     left: var(--left-distance);
   }
-
   &__top-right {
     top: var(--header-offset);
     transform: rotate(90deg);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
   }
-
   &__bottom-left {
     transform: rotate(-90deg);
     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);
     }
   }
-
   &__bottom-right {
     transform: rotate(180deg);
     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);
     }
   }
-
   &__bottom-bar {
     position: fixed;
     width: 100%;
@@ -117,48 +108,16 @@
     bottom: 0;
     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);
     }
-
     @container content-width (width > 1px) {
       width: 100cqw;
     }
   }
 }
 
-.rtl .experimental-screen {
+@media screen and (min-width: 768px) {
-  &__top-left {
-    right: var(--left-distance);
-    left: unset;
-  }
-
-  &__top-right {
-    transform: rotate(-90deg) !important;
-    right: calc(var(--right-distance) - var(--d-border-radius-large));
-    left: unset;
-  }
-
-  &__bottom-left {
-    transform: rotate(90deg);
-    right: var(--left-distance);
-    left: unset;
-  }
-
-  &__bottom-right {
-    transform: rotate(180deg);
-    left: unset;
-    right: calc(var(--right-distance) - var(--d-border-radius-large));
-  }
-
-  &__bottom-bar {
-    right: var(--left-distance);
-    left: unset;
-  }
-}
-
-@media screen and (width >= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -167,7 +126,7 @@
   }
 }
 
-@media screen and (width <= 768px) {
+@media screen and (max-width: 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -176,7 +135,7 @@
   }
 }
 
-@media screen and (width <= 400px) {
+@media screen and (max-width: 400px) {
   .with-topic-progress {
     bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
   }

scss/buttons.scss

@@ -8,13 +8,11 @@
 
 .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
   background: var(--accent-color);
-
   &:hover,
   &:focus-visible {
     background: oklch(from var(--accent-color) 40% c h) !important;
     box-shadow: none;
   }
-
   .d-icon {
     color: var(--accent-text-color);
   }
@@ -28,37 +26,31 @@
 .discourse-no-touch .btn-default,
 .discourse-no-touch .select-kit .select-kit-header.btn-default {
   background: var(--primary-100);
-
   .d-icon {
     color: var(--accent-color);
   }
 
   &:hover {
     border-color: transparent;
-    box-shadow: 0 0 8px 1px var(--button-box-shadow);
+    box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
     background: var(--d-content-background);
     color: var(--accent-color);
-
     .d-icon {
       color: var(--accent-color);
     }
   }
-
   &:focus-visible {
     background: var(--d-content-background);
     color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--button-box-shadow);
+    box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
-
     .d-icon {
       color: var(--accent-color);
     }
   }
-
   &:active:not(:hover, :focus) {
     color: var(--primary);
     background: var(--tertiary-300);
     background-image: none;
-
     .d-icon {
       color: var(--tertiary-high);
     }
@@ -66,41 +58,35 @@
 }
 
 .btn-primary,
-#create-topic.btn,
+#create-topic.btn {
-.discourse-no-touch .btn-default.ai-new-question-button {
   background-color: var(--accent-color);
   color: var(--accent-text-color);
-
   .d-icon {
     color: var(--accent-text-color);
   }
-
   &:hover {
     .discourse-no-touch & {
       background: light-dark(
         oklch(from var(--accent-color) 40% c h),
         oklch(from var(--accent-color) 50% c h)
       );
-      box-shadow: 0 0 6px 1px var(--button-box-shadow);
+      box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
       color: var(--accent-text-color);
-
       .d-icon {
         color: var(--accent-text-color);
       }
     }
   }
-
   &:focus-visible {
     .discourse-no-touch & {
       background: light-dark(
         oklch(from var(--accent-color) 40% c h),
         oklch(from var(--accent-color) 50% c h)
       );
-      box-shadow: 0 0 0 4px var(--button-box-shadow);
+      box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
       color: var(--accent-text-color);
     }
   }
-
   &:active {
     background: light-dark(
       oklch(from var(--accent-color) 40% c h),

scss/chat.scss

@@ -1,13 +1,9 @@
-@use "lib/viewport";
-
 .full-page-chat.full-page-chat-sidebar-enabled {
   border: none;
 }
 
 .c-navbar-container {
-  .full-page-chat & {
   padding: 0 1.5em;
-  }
   background-color: var(--d-content-background);
 }
 
@@ -17,43 +13,21 @@ body.has-full-page-chat {
 
 .chat-drawer-container {
   .is-expanded & {
-    box-shadow: 0 0 0 2px var(--tertiary-medium);
+    box-shadow: 0px 0px 0px 2px var(--tertiary-medium);
   }
-
   .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 {
   z-index: z("composer", "content");
-
-  .peek-mode-active & {
-    padding-bottom: 0;
-    left: unset;
-    right: var(--main-grid-gap);
-
-    &:has(.is-expanded) {
-      z-index: calc(z("composer", "dropdown") + 1);
-    }
-  }
-}
-
-.chat-drawer {
-  .peek-mode-active & {
-    max-width: 90vw;
-  }
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
   margin-bottom: var(--spacing-block-xs);
   font-size: var(--font-up-1);
   border-bottom: none;
-
   &:hover {
     background-color: var(--d-sidebar-active-background);
   }
@@ -78,11 +52,5 @@ body.has-full-page-chat {
 }
 
 .chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
-  z-index: z("modal", "dialog");
+  z-index: z("composer", "content") + 1;
-}
-
-.chat-replying-indicator-container {
-  @include viewport.from(sm) {
-    margin-left: calc(0.65em + 0.2rem);
-  }
 }

scss/color-choice.scss

@@ -4,21 +4,17 @@
     width: 100%;
     justify-content: flex-start;
   }
-
   &__item .btn-icon-text.btn-flat:hover {
     background-color: var(--d-selected);
     box-shadow: none;
     color: var(--primary);
   }
-
   &__item .btn-icon-text.btn-flat:hover svg {
     color: var(--icon-color);
   }
-
   &__item .btn-icon-text.btn-flat svg {
     color: var(--icon-color);
   }
-
   &__item-choice.active.btn-icon-text.btn-flat {
     background-color: var(--d-selected);
   }

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: rgb(var(--tertiary-50-rgb), 1);
+  --d-sidebar-footer-fade: rgba(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 (width >= 1300px) {
+@media screen and (min-width: 1300px) {
   html:not(.fullscreen-composer) {
     .peek-mode-toggle svg {
       transform: scaleX(-1);
@@ -18,7 +18,6 @@
           transition: none;
           box-shadow: none;
           border-radius: var(--d-border-radius-large);
-
           .grippie {
             display: none;
           }

scss/composer.scss

@@ -1,11 +1,8 @@
-@use "lib/viewport";
-
 #reply-control
   .select-kit.dropdown-select-box.composer-actions
   .select-kit-header {
   border: 1px solid var(--tertiary-700);
   background: var(--secondary);
-
   &:hover {
     .d-icon {
       color: var(--accent-color);
@@ -14,15 +11,14 @@
 }
 
 #reply-control.hide-preview:not(.draft) {
-  @include viewport.from(sm) {
+  @include breakpoint("mobile-extra-large", $rule: min-width) {
     background: var(--d-content-background);
+
     border-top-right-radius: var(--d-border-radius);
     border-top-left-radius: var(--d-border-radius);
 
     .grippie {
       background: var(--tertiary-low);
-      border-top-right-radius: var(--d-border-radius);
-      border-top-left-radius: var(--d-border-radius);
     }
 
     .user-selector,
@@ -47,7 +43,6 @@
     .reply-area {
       padding-inline: 0;
     }
-
     .reply-to,
     .submit-panel {
       padding-inline: var(--spacing-inline-sm);
@@ -64,7 +59,6 @@
     }
   }
 }
-
 .d-editor-button-bar {
   .btn:hover,
   .toolbar-popup-menu-options.is-expanded {
@@ -81,7 +75,6 @@
         .d-icon {
           color: var(--primary-high);
         }
-
         &:hover {
           .d-icon {
             color: var(--primary);
@@ -95,27 +88,3 @@
     border-radius: var(--d-border-radius);
   }
 }
-
-.discourse-no-touch .translation-selector-dropdown {
-  .select-kit-header.btn-default {
-    background: var(--background-color);
-  }
-}
-
-#reply-control.composer-action-add_translation {
-  .d-editor-preview .d-editor-translation-preview-wrapper {
-    border-color: var(--d-sidebar-border-color);
-  }
-
-  .d-editor-preview .d-editor-translation-preview-wrapper__header {
-    top: 6.5rem;
-    padding: 0.25rem 0.75rem;
-    background: var(--background-color);
-    color: var(--accent-color);
-    border-radius: var(--d-border-radius-large);
-  }
-
-  .topic-title-translator input {
-    width: 47.25vw;
-  }
-}

scss/desktop-full-width.scss

@@ -1,5 +1,3 @@
-@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.
@@ -15,31 +13,12 @@ $sidebar-width: 17em;
 }
 
 .d-header #site-logo {
+  // constraining the logo to fit its grid container
   // this prevents the logo from shifting header content
   // when the sidebar is opened
   max-height: 100%;
   max-width: 100%;
   object-fit: contain; // contains logo without squishing/stretching
-
-  // allows some flexibility for wide logos
-  body:not(.has-sidebar-page) & {
-    max-width: unset;
-
-    @include viewport.until(sm) {
-      max-width: 25vw;
-    }
-  }
-}
-
-.d-header #site-text-logo {
-  font-size: clamp(var(--font-0), 2.5vw, var(--font-up-2));
-
-  .has-sidebar-page & {
-    white-space: wrap;
-    line-height: var(--line-height-medium);
-
-    @include line-clamp(2);
-  }
 }
 
 #main-outlet-wrapper {
@@ -105,7 +84,7 @@ $sidebar-width: 17em;
         grid-area: extra-info;
         white-space: nowrap;
 
-        @include viewport.until(md) {
+        @include breakpoint("tablet") {
           display: none;
         }
       }
@@ -129,7 +108,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 (width <= 1400px) {
+        @media screen and (max-width: 1400px) {
           grid-template-columns:
             calc(var(--d-sidebar-width) - 11px)
             1fr
@@ -138,7 +117,7 @@ $sidebar-width: 17em;
             auto;
         }
 
-        @media screen and (width <= 1000px) {
+        @media screen and (max-width: 1000px) {
           gap: 0.5em;
         }
 
@@ -159,7 +138,7 @@ $sidebar-width: 17em;
 
   .d-header-mode {
     .bootstrap-mode {
-      display: none;
+      margin: 0;
     }
   }
 
@@ -171,7 +150,7 @@ $sidebar-width: 17em;
     overflow: visible;
 
     .title {
-      flex: 1 1 auto;
+      flex: 1 0 auto;
     }
   }
 
@@ -191,11 +170,11 @@ $sidebar-width: 17em;
 .header-search--enabled .floating-search-input-wrapper {
   grid-area: extra-info;
 
-  @include viewport.until(md) {
+  @include breakpoint(tablet) {
     grid-area: rspace;
   }
 
-  @include viewport.until(sm) {
+  @include breakpoint(mobile-extra-large) {
     display: none;
   }
 }
@@ -210,7 +189,7 @@ body.has-sidebar-page {
     padding: 0;
   }
 
-  @media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
+  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
     #reply-control.show-preview {
       margin-left: auto;
       margin-right: auto;
@@ -221,7 +200,7 @@ body.has-sidebar-page {
     }
   }
 
-  @media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
+  @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))) {
     #reply-control.show-preview:not(.fullscreen) {
       margin-left: $sidebar-width;
       width: auto;
@@ -267,7 +246,7 @@ body.sidebar-animate {
 }
 
 // provides some extra space for login buttons
-@media screen and (width >= 1400px) {
+@media screen and (min-width: 1400px) {
   .anon {
     .d-header .panel {
       grid-column-start: -4;

scss/desktop-horizon-fixes.scss

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

scss/header.scss

@@ -1,10 +1,7 @@
-@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);
   }
 }
@@ -51,10 +48,8 @@
 .discourse-no-touch .interface-color-selector-content {
   border: none;
   border-radius: var(--d-border-radius);
-
   .btn {
     border: none;
-
     &:hover {
       box-shadow: none;
     }
@@ -64,6 +59,10 @@
 .drop-down-mode .d-header-icons .active .icon,
 .drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
   border-color: transparent;
+}
+
+.drop-down-mode .d-header-icons .active .icon,
+.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
   background-color: transparent;
 }
 

scss/login.scss

@@ -6,7 +6,6 @@ body.static-login {
       "sidebar below-content";
     grid-template-rows: auto 1fr auto;
   }
-
   .login-welcome {
     border-radius: none;
     border: none;

scss/main.scss

@@ -1,5 +1,3 @@
-@use "lib/viewport";
-
 :root {
   --main-grid-gap: 0.5em;
 }
@@ -7,19 +5,17 @@
 html:not(:has(.has-full-page-chat)) {
   background-color: var(--background-color);
 
-  @include viewport.until(sm) {
+  @include breakpoint("mobile-extra-large") {
     background-color: var(--d-content-background);
   }
 }
 
 body {
   -webkit-font-smoothing: antialiased;
-
+  @include breakpoint("mobile-extra-large") {
-  @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
-
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
 }
@@ -33,61 +29,52 @@ body.has-full-page-chat:not(.has-sidebar-page) {
   .d-header {
     background-color: var(--background-color);
   }
-
   #main-outlet-wrapper {
     gap: var(--main-grid-gap);
-
+    @include breakpoint(medium) {
-    @include viewport.until(lg) {
       gap: 0;
     }
   }
 }
 
 body.has-sidebar-page #main-outlet-wrapper {
-  grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;
+  grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0px;
-
   #main-outlet {
     max-width: unset;
   }
 }
 
 body:not(.has-sidebar-page) #main-outlet-wrapper {
-  @include viewport.from(lg) {
+  @include breakpoint(medium, $rule: min-width) {
-    grid-template-columns: 0 minmax(0, 1fr) 0;
+    grid-template-columns: 0px minmax(0, 1fr) 0px;
   }
 }
 
-body:not(.has-full-page-chat, .wizard) {
+body:not(.has-full-page-chat) {
-  @include viewport.from(xl) {
+  @include breakpoint(extra-large, $rule: min-width) {
     background-color: var(--background-color);
   }
-
   #main-outlet-wrapper {
-    @include viewport.until(lg) {
+    @include breakpoint(medium) {
       --main-grid-gap: 0;
     }
-
+    @media screen and (min-width: 768px) {
-    @media screen and (width >= 768px) {
       gap: var(--main-grid-gap);
     }
-
     #main-outlet {
       width: 100%;
       max-width: unset;
       padding-bottom: var(--spacing-block-l);
       border-radius: var(--d-border-radius-large);
       background-color: var(--d-content-background);
-
+      @include breakpoint(medium) {
-      @include viewport.until(lg) {
+        border-radius: 0px;
-        border-radius: 0;
       }
-
       html.composer-open & {
         padding-bottom: var(--composer-height);
       }
-
       > *:not(.experimental-screen, .activate-account) {
-        @include viewport.from(lg) {
+        @include breakpoint(medium, $rule: min-width) {
           box-sizing: border-box;
           max-width: 1000px;
           margin-inline: auto;
@@ -100,7 +87,7 @@ body:not(.has-full-page-chat, .wizard) {
 
 #list-area {
   .show-more.has-topics {
-    @include viewport.from(lg) {
+    @include breakpoint(medium, $rule: min-width) {
       width: auto;
       right: 50%;
       transform: translateX(50%);
@@ -112,7 +99,6 @@ body:not(.has-full-page-chat, .wizard) {
       }
     }
   }
-
   .topic-list-body {
     padding-top: var(--spacing-block-m);
   }

scss/misc.scss

@@ -1,5 +1,3 @@
-@use "lib/viewport";
-
 .user-main .about.collapsed-info .details {
   background: var(--d-content-background);
 }
@@ -71,7 +69,7 @@ input[type="color"]:focus,
   background-color: var(--background-color);
 }
 
-@include viewport.until(sm) {
+@include breakpoint(mobile-extra-large) {
   // pinned topic excerpts are hidden on small screens too
   .fk-d-menu__trigger.topic-list-layout-trigger {
     display: none;
@@ -87,7 +85,7 @@ input[type="color"]:focus,
 
 .user-main .about .details {
   padding: 1em 1em 0;
-  border-bottom: 0;
+  border-bottom: 0px;
   border-radius: var(--d-border-radius);
   background-color: var(--primary-50);
 }
@@ -107,35 +105,3 @@ input[type="color"]:focus,
 .period-chooser-header {
   border-radius: 0;
 }
-
-// compatibility with the top contributors sidebar theme component
-// https://meta.discourse.org/t/top-contributors-sidebar/215110
-.list-container
-  #list-area
-  > .contents
-  > .topic-list:has(.discourse-top-contributors) {
-  grid-template-areas: "head head" "body sidebar";
-  grid-template-rows: auto 1fr;
-
-  @include viewport.until(lg) {
-    grid-template-areas: "head head" "body body";
-  }
-
-  tbody {
-    display: flex;
-  }
-
-  .discourse-top-contributors {
-    width: auto;
-    box-sizing: border-box;
-
-    @include viewport.until(lg) {
-      display: none;
-    }
-
-    .top-contributors-heading {
-      font-size: var(--font-up-2);
-      padding-bottom: 0.5em;
-    }
-  }
-}

scss/mobile-stuff.scss

@@ -1,93 +1,77 @@
-@use "lib/viewport";
+//temp sepeate file to avoid merge hell… to be distributed later
-
+@include breakpoint(medium) {
-// temp separate file to avoid merge hell… to be distributed later
-@include viewport.until(lg) {
   html,
   .d-header {
     background-color: var(--d-content-background);
   }
 }
-
 #main-outlet-wrapper {
   *[class*="navigation-"] & {
-    @include viewport.until(sm) {
+    @include breakpoint(mobile-extra-large) {
       padding: 0;
     }
   }
 }
-
 #main-outlet {
-  @include viewport.until(sm) {
+  @include breakpoint(mobile-extra-large) {
     padding-top: var(--spacing-block-sm);
   }
 
   .list-controls {
-    @include viewport.until(sm) {
+    @include breakpoint(mobile-extra-large) {
       padding-inline: var(
         --spacing-inline-m
       ) !important; //override will be fixed when the whole chat page shenanigans is resolved
       padding-block: var(--spacing-block-s);
       border-bottom: 1px solid var(--primary-200);
     }
-
     .navigation-container {
-      @include viewport.until(sm) {
+      @include breakpoint(mobile-extra-large) {
         gap: var(--spacing-inline-s);
-
+        //dont know why we even hide this crucial navigation on mobile
         .category-breadcrumb.hidden,
         .category-breadcrumb {
           display: flex !important;
-          column-gap: var(--spacing-inline-m);
+          column-gap: var(--spacing-inline-s);
           row-gap: var(--spacing-block-xs);
           flex-basis: 100%;
-
           li {
             margin-right: 0;
             margin-left: calc(
               (var(--spacing-block-s) - 2px) * -1
             ); // 2px is width of the outline
           }
-
-          .select-kit-header-wrapper {
-            gap: 0.25em;
-          }
-
           .select-kit-header {
             background: var(--d-content-background);
+            border: 0;
           }
         }
-
         .btn-default {
           border: 0;
           margin-right: 0;
-
           .d-icon {
             font-size: var(--font-up-1);
           }
         }
-
         .fk-d-button-tooltip {
           margin-right: 0;
           margin-left: var(
             --spacing-inline-xs
-          ); // pure visual correction for horizontal alignment
+          ); //pure visual correction for horitzontal alignment
-
           &:has(#create-topic) {
             order: 1;
           }
         }
       }
-
       #navigation-bar,
       .navigation-controls,
       .category-breadcrumb {
-        @include viewport.until(sm) {
+        @include breakpoint(mobile-extra-large) {
           margin-bottom: 0;
         }
       }
-
       .navigation-controls {
-        @include viewport.until(sm) {
+        @include breakpoint(mobile-extra-large) {
           gap: var(--spacing-inline-s);
         }
       }
@@ -95,12 +79,12 @@
   }
 
   .list-container {
-    @include viewport.until(sm) {
+    @include breakpoint(mobile-extra-large) {
       padding-inline: 0 !important;
     }
 
     .topic-list-body {
-      @include viewport.until(sm) {
+      @include breakpoint(mobile-extra-large) {
         border-top: 0;
         padding-top: 0;
       }
@@ -108,17 +92,15 @@
   }
 
   #topic-title {
-    @include viewport.until(sm) {
+    @include breakpoint(mobile-extra-large) {
       padding-inline: var(--spacing-inline-s) !important;
 
       .title-wrapper {
         gap: var(--spacing-block-s);
       }
-
       .topic-category {
         order: -1;
       }
-
       //make mixin of this
       .badge-category__wrapper {
         font-size: var(--font-down-2-rem);
@@ -141,15 +123,12 @@
           oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
         );
       }
-
       .discourse-tags {
         gap: var(--spacing-inline-xs);
-
         &__tag-separator {
           display: none;
         }
       }
-
       .discourse-tag {
         font-size: var(--font-down-2-rem);
         padding: var(--spacing-inline-xs) var(--spacing-inline-s);
@@ -160,9 +139,8 @@
       }
     }
   }
-
   .container.posts {
-    @include viewport.until(sm) {
+    @include breakpoint(mobile-extra-large) {
       padding-inline: var(--spacing-inline-xs) !important;
 
       .main-avatar .avatar {
@@ -176,22 +154,18 @@
             font-size: var(--font-0-rem);
           }
         }
-
         .contents {
           padding-top: var(--spacing-block-m);
         }
       }
-
       .small-action {
         &-desc {
           padding: var(--spacing-block-xs) 0;
         }
-
         //for core eventually, better way imo
         .topic-avatar {
           padding-top: 0;
           align-items: center;
-
           .d-icon {
             font-size: var(--font-up-1);
           }
@@ -201,32 +175,29 @@
   }
 
   #topic-footer-buttons {
-    @include viewport.until(sm) {
+    @include breakpoint(mobile-extra-large) {
       padding-inline: var(--spacing-inline-xs) !important;
     }
   }
 }
 
 //should be changed in core, should not be a primary btn
-// changing this into straight buttons to match the progress one, which doesn't work well with rounded corners
+//changing this into straight buttons to match the progress one, which doesnt work well with rounded corners
 #topic-progress-wrapper {
   .progress-back-container {
     margin-right: 0;
     margin-bottom: var(--spacing-block-xs);
-
     .btn-primary.progress-back {
       border-radius: 0;
       background: var(--secondary);
       border: 1px solid var(--tertiary-low);
       color: var(--accent-color);
       padding: var(--spacing-inline-s) var(--spacing-inline-m);
-
       .d-icon {
         color: var(--accent-color);
       }
     }
   }
-
   .topic-admin-menu-trigger {
     border-radius: 0;
     background: var(--secondary);

scss/nav-pills.scss

@@ -1,64 +1,36 @@
-@use "lib/viewport";
 .list-controls {
   position: sticky;
   top: var(--header-offset);
   background: var(--d-content-background);
   z-index: z("base");
-  padding: 1.5rem 0 0 0;
+  padding: 1.5rem 0 1rem 0;
   max-width: unset;
 
-  @include viewport.until(sm) {
-    padding-bottom: 1em;
-  }
-
   .navigation-container {
-    position: relative;
     gap: 1rem;
-
-    @include viewport.from(sm) {
-      &:after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -1rem;
-        height: 1rem;
-        background: linear-gradient(
-          to bottom,
-          var(--d-content-background),
-          transparent
-        );
-      }
-    }
-
     .category-breadcrumb {
       order: 1;
     }
   }
-
   .combo-box .combo-box-header {
-    // needs more specificity than just in the button file
+    // needs more specificy than just in the button file
     background-color: var(--secondary);
-    border-radius: var(--d-border-radius);
+    border-radius: var(--d-border-radius-large);
     border: 1px solid var(--primary-300);
-
     &:hover {
       border: 1px solid var(--accent-color);
     }
-
     &:focus-visible {
       .discourse-no-touch & {
         background: var(--secondary);
         color: var(--accent-color);
-        box-shadow: 0 0 0 3px var(--button-box-shadow);
+        box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
-
         .d-icon {
           color: var(--accent-color);
         }
       }
     }
   }
-
   .select-kit.combo-box.category-drop.has-selection
     .category-drop-header:hover {
     border-color: transparent;
@@ -75,7 +47,6 @@
   .discourse-no-touch & {
     background: transparent;
     color: var(--d-nav-color--hover);
-
     &::after {
       content: "";
       position: absolute;

scss/sidebar-new-topic-button.scss

@@ -5,12 +5,6 @@
   }
 }
 
-.has-ai-conversations-sidebar {
-  .sidebar-new-topic-button__wrapper {
-    display: none;
-  }
-}
-
 .sidebar-new-topic-button {
   flex: 1 1 auto;
 
@@ -51,7 +45,6 @@
         border-radius: 0 var(--d-button-border-radius)
           var(--d-button-border-radius) 0;
         padding-right: 0.65em;
-
         .d-icon {
           color: var(--secondary);
         }

scss/sidebar.scss

@@ -1,24 +1,18 @@
-@use "lib/viewport";
-
 .sidebar-wrapper,
 .sidebar-hamburger-dropdown {
-  @include viewport.until(lg) {
+  @include breakpoint(medium) {
     background: var(--secondary);
-
     .sidebar-footer-wrapper {
       background: var(--secondary);
-
       .sidebar-footer-container::before {
         display: none;
       }
     }
   }
-
   .has-full-page-chat &,
   .has-full-page-chat & .sidebar-footer-wrapper {
     background: transparent;
   }
-
   .sidebar-container {
     border-right: none;
   }
@@ -26,38 +20,31 @@
   .sidebar-sections {
     padding: 0;
   }
-
   .sidebar-section-link {
     transition: none;
     border-radius: var(--d-border-radius);
   }
-
   .dropdown-menu__item .sidebar-section-link {
-    border-radius: 0;
+    border-radius: 0px;
   }
 }
-
 .sidebar-section-wrapper {
-  @include viewport.from(xl) {
+  @include breakpoint(extra-large, $rule: min-width) {
     padding-block: 0.45em;
   }
-
+  @include breakpoint(mobile-extra-large) {
-  @include viewport.until(sm) {
     .hamburger-panel .revamped & {
       margin-bottom: var(--spacing-block-m);
     }
   }
-
   .sidebar-section-header {
     font-size: var(--font-down-2);
   }
-
   .sidebar-section-content {
     margin: 0;
     display: flex;
     flex-direction: column;
-
+    @include breakpoint(extra-large, $rule: min-width) {
-    @include viewport.from(xl) {
       gap: var(--spacing-block-xs);
     }
   }
@@ -65,7 +52,6 @@
 
 .sidebar-wrapper .sidebar-sections {
   --scrollbarThumbBg: var(--d-selected);
-  padding: 0 1rem;
 }
 
 .sidebar-section-link-wrapper .sidebar-section-link:focus,
@@ -77,17 +63,11 @@
 
 .sidebar-new-topic-button__wrapper {
   margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
-
   .sidebar-new-topic-button .d-icon {
     display: none;
   }
 }
 
-// put the draft menu above the slide-out hamburger on small desktop screens
+.sidebar-wrapper .sidebar-sections {
-@include viewport.until(md) {
+  padding: 0 1rem;
-  html:not(.mobile-view) {
-    .topic-drafts-menu-content {
-      z-index: z("modal", "overlay");
-    }
-  }
 }

scss/topic-cards.scss

@@ -1,12 +1,9 @@
-@use "lib/viewport";
-
 .topic-list .topic-list-item-separator {
   display: none;
 }
 
 .topic-list > .topic-list-body > .topic-list-item.last-visit {
   border-bottom: 1px solid var(--primary-300);
-
   &:hover {
     border-color: var(--accent-color);
   }
@@ -16,107 +13,95 @@
   border: none;
   display: flex;
   flex-direction: column;
-  gap: 1.25em;
+  gap: 1em;
-
+  @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;
   }
 }
 
 .topic-list-body .topic-list-item {
-  position: relative;
-  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);
   display: grid;
-  grid-template-columns: min-content min-content auto min-content;
+  grid-template-columns: 20px min-content min-content auto min-content;
+  grid-template-rows: auto minmax(20px, auto);
   grid-template-areas:
-    "creator title title status"
+    ". . . . status"
-    "creator category activity likes-replies";
+    "activity . . likes-replies category";
-  grid-column-gap: 0.75rem;
+  grid-column-gap: 12px;
-  grid-row-gap: 0.5rem;
+  grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
-  cursor: pointer;
+  td.main-link .link-top-line {
-
+    grid-row: 1/2;
-  .bulk-select-enabled & {
+    grid-column: 1/-1;
-    grid-template-columns: min-content min-content min-content auto min-content;
+    font-weight: 500;
-    grid-template-areas:
-      "bulk-select creator title title status"
-      "bulk-select creator category activity likes-replies";
   }
-
+  &.--has-status-card td.main-link .link-top-line {
-  @include viewport.until(sm) {
+    grid-column: 1/-2;
+  }
+  @include breakpoint(extra-large) {
     grid-template-areas:
-      "category category category status"
+      ". . . . status"
-      "creator title title title"
+      "activity . . likes-replies category";
-      "activity activity activity likes-replies";
+  }
-    row-gap: 0.75em;
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-row: 2/3;
+      grid-column: 1/-1;
+    }
+    grid-template-columns: 20px repeat(5, 1fr);
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      "category category category category category status"
+      ". . . . . ."
+      "activity . . . . likes-replies";
     border: none;
     border-bottom: 1px solid var(--primary-200);
     box-shadow: none;
     border-radius: 0;
   }
-
-  &: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);
-  }
-
   &.excerpt-expanded {
-    @include viewport.until(sm) {
+    grid-template-columns: 20px auto auto min-content min-content;
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      ". . . . status"
+      "activity . . . ."
+      "excerpt excerpt excerpt likes-replies category";
+    @include breakpoint(extra-large) {
+      grid-template-areas:
+        ". . . . status"
+        "activity . . . ."
+        "excerpt excerpt excerpt likes-replies category";
+    }
+    @include breakpoint(mobile-extra-large) {
+      grid-template-rows: auto auto auto;
+      grid-template-areas:
+        "category category category category status"
+        ". . . . ."
+        "activity . . . likes-replies";
       .topic-excerpt,
       .link-bottom-line {
         display: none;
       }
     }
-
+    .topic-likes-replies-data {
-    @include viewport.from(sm) {
+      align-self: flex-end;
-      grid-template-areas:
-        "creator title title status"
-        "creator category activity likes-replies "
-        "creator excerpt excerpt excerpt";
-
-      .bulk-select-enabled & {
-        grid-template-areas:
-          "bulk-select creator title title status"
-          "bulk-select creator category activity likes-replies "
-          " bulk-select creator excerpt excerpt excerpt";
     }
+    .topic-category-data {
+      align-items: flex-end;
     }
-
+    .badge-category__wrapper {
-    // when there is enough space, excerpt can be next to likes-replies
+      height: min-content;
-    @include viewport.from(lg) {
-      grid-template-areas:
-        "creator title title status"
-        "creator category activity ."
-        "creator excerpt excerpt likes-replies";
     }
-  }
+    .link-bottom-line {
-
-  .link-top-line {
-    grid-area: title;
-    font-weight: 500;
       display: flex;
-    align-items: center;
-
-    .title {
-      padding: 0;
     }
   }
 
@@ -125,8 +110,7 @@
   td.posters,
   td.posts,
   td.views,
-  td.activity,
+  td.activity {
-  td.topic-category-status-data {
     display: contents;
   }
 
@@ -134,150 +118,113 @@
     padding: 0;
   }
 
-  // display:nones
+  // topic activity, avatar, text
-  td.main-link a.topic-status,
-  .link-bottom-line,
-  .badge-notification.new-topic::before {
-    display: none;
-  }
-
-  .topic-category-data {
-    grid-area: category;
-    display: flex;
-  }
-
-  .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)
-      );
-    }
-  }
-
-  // OP avatar
-  .topic-creator-data {
-    grid-area: creator;
-
-    .avatar {
-      height: 50px;
-      width: 50px;
-      border-radius: var(--d-border-radius);
-
-      @include viewport.until(sm) {
-        height: 30px;
-        width: 30px;
-        border-radius: 0.25rem;
-      }
-    }
-  }
-
-  .dot-separator {
-    width: 0.25em;
-    height: 0.25em;
-    background-color: var(--primary-500);
-    border-radius: 100%;
-    margin-inline: 0.25em;
-  }
-
-  // topic activity, icon, text
   .topic-activity-data {
-    @include ellipsis;
     grid-area: activity;
   }
-
   .topic-activity {
-    display: flex;
+    display: grid;
+    grid-template-columns: 20px auto auto auto;
     font-size: var(--font-down-1);
     height: 100%;
     align-items: center;
     gap: 0.25em;
   }
 
-  .topic-activity__type {
+  .topic-activity__user .avatar {
-    border-radius: 0.25rem;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+  }
+
+  .topic-activity__user {
+    height: 20px;
+    width: 20px;
+    border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: var(--primary-low);
   }
 
   .topic-activity__username {
-    @include ellipsis;
     margin-left: 0.25em;
+    text-wrap: nowrap;
   }
 
-  // timestamp
+  @include breakpoint(mobile-extra-large) {
-  td.activity .post-activity {
+    .topic-activity__username {
-    grid-area: activity;
+      display: none;
-    font-size: var(--font-down-1);
+    }
-    color: var(--primary-500);
+    .topic-activity__reason {
-    margin-left: auto;
+      margin-left: 0.25em;
-    padding: 0;
+    }
+  }
+
+  .topic-activity.--updated .topic-activity__reason {
+    margin-left: 0.25em;
   }
 
   // status
   .topic-status-data {
     grid-area: status;
   }
-
+  .topic-status-data {
+    grid-area: status;
+    position: relative;
+  }
   .topic-status-card {
     height: min-content;
     margin-left: auto;
     display: flex;
     flex-direction: row;
-    gap: 0.25em;
+    gap: 4px;
     align-items: center;
-    padding: 0.2em 0.5rem;
+    padding: 0 6px;
-    font-size: var(--font-down-3);
+    font-size: var(--font-down-2);
     font-weight: 600;
     border-radius: var(--d-border-radius);
     border: 1px solid var(--status-color);
     color: var(--status-color);
     width: min-content;
-
+    @include breakpoint("large", min-width) {
-    &.--pinned {
-      --status-color: var(--primary-500);
-    }
-
-    &.--hot {
-      --status-color: #e45735;
-    }
-
-    @include viewport.from(lg) {
       position: absolute;
-      right: 1rem;
+      right: 0px;
-      top: 0;
+      top: -20px;
-      transform: translateY(-45%);
       background-color: var(--d-content-background);
+      height: 20px;
+      font-size: var(--font-down-3);
     }
-
     svg {
       font-size: var(--font-down-1);
       color: var(--status-color);
     }
   }
 
+  .topic-status-card.--pinned {
+    --status-color: var(--primary-500);
+  }
+  .topic-status-card.--hot {
+    --status-color: #e45735;
+  }
+
   .link-top-line .event-date {
     margin-left: 0.5em;
     font-size: var(--font-down-3);
   }
 
+  td.main-link a.topic-status {
+    display: none;
+  }
+
   .topic-list-data {
     padding: 0;
   }
 
+  td.main-link .link-top-line a.raw-topic-link {
+    padding: 0;
+  }
+
   .topic-post-badges .badge-notification.unread-posts,
   .topic-post-badges .badge-notification.new-topic {
     background-color: var(--tertiary);
@@ -290,13 +237,27 @@
     min-width: unset;
   }
 
-  // metadata - excerpt
+  // timestamp
-  .topic-excerpt {
+  td.activity .post-activity {
-    grid-area: excerpt;
+    grid-area: activity;
-    margin: 0;
+    font-size: var(--font-down-1);
+    color: var(--primary-500);
+    margin-left: auto;
     padding: 0;
+  }
+
+  .link-bottom-line {
+    display: none;
+  }
+
+  // metadata
+  // metadata - excerpt
+  .topic-excerpt,
+  td.main-link .link-bottom-line {
+    grid-row: 3 / -1;
+    grid-column: 1 / -3;
+    margin: 0;
     font-size: var(--font-down-2);
-    width: 100%;
 
     .excerpt__contents {
       color: var(--primary-high);
@@ -308,6 +269,38 @@
     }
   }
 
+  td.topic-category-status-data {
+    display: contents;
+  }
+  td.topic-category-data {
+    grid-area: category;
+    display: flex;
+    justify-content: flex-end;
+    @include breakpoint(mobile-extra-large) {
+      justify-content: flex-start;
+    }
+  }
+  td.topic-category-data .badge-category__wrapper,
+  td.main-link .link-bottom-line .badge-category__wrapper {
+    border-radius: var(--d-border-radius);
+    padding: 3px 6px;
+    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 breakpoint(tablet) {
+      padding: 2px 6px;
+      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)
+      );
+    }
+  }
   td.main-link .discourse-tags {
     display: none;
   }
@@ -328,7 +321,6 @@
     height: min-content;
     align-self: center;
   }
-
   .topic-likes-replies-data .topic-likes,
   .topic-likes-replies-data .topic-replies {
     display: flex;
@@ -336,65 +328,53 @@
     gap: 0.5em;
     align-items: center;
     color: var(--primary-500);
-    font-size: var(--font-down-1-rem);
-
     svg {
       color: var(--primary-600);
     }
   }
-
-  .bulk-select {
-    grid-area: bulk-select;
-    padding: 0;
-    margin: 0;
-    align-self: center;
-    justify-self: center;
-
-    @include viewport.until(sm) {
-      align-self: flex-start;
 }
 
-    label {
+.topic-list-item {
-      margin: 0;
+  background: var(--d-content-background);
+  box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
+  &:hover {
+    .discourse-no-touch & {
+      border-color: var(--accent-color);
+      background: var(--d-content-background);
     }
-
-    &th {
-      display: none;
   }
+  &.selected {
+    box-shadow: 0px 0px 0px 2px var(--accent-color),
+      0px 0px 12px 1px var(--topic-card-shadow);
   }
 }
 
 // Bookmarks
+
 .topic-list-item.bookmark-list-item {
   .link-bottom-line {
     font-size: unset;
   }
-
   //regular card without excerpt class
   grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
   grid-template-areas:
     ". . . . . . dropdown"
     "avatar update metadata metadata metadata . category";
-
+  @include breakpoint(mobile-extra-large) {
-  @include viewport.until(sm) {
     grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
     grid-template-areas:
       " . . . . . . dropdown"
       "update metadata metadata metadata metadata category category";
-
     .avatar {
       display: none;
     }
   }
-
   &.has-metadata {
     grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
-
+    @include breakpoint(mobile-extra-large) {
-    @include viewport.until(sm) {
       grid-template-areas:
         ". . . . . . . dropdown"
         "update update metadata metadata metadata metadata category category";
-
       .avatar {
         display: none;
       }
@@ -410,16 +390,21 @@
       "excerpt excerpt excerpt ."
       "excerpt excerpt excerpt category";
 
-    @include viewport.from(xl) {
+    .badge-category__wrapper {
+      align-self: flex-end;
+      height: min-content;
+      max-width: 100%;
+    }
+
+    @include breakpoint(extra-large, $rule: min-width) {
       grid-template-columns: 20px min-content auto min-content;
     }
 
-    @include viewport.until(sm) {
+    @include breakpoint(mobile-extra-large) {
       grid-template-columns: auto min-content;
       grid-template-areas:
         ".  dropdown"
         "category category";
-
       .post-excerpt,
       .avatar {
         display: none;
@@ -433,8 +418,7 @@
         "avatar update metadata metadata"
         "excerpt excerpt excerpt . "
         "excerpt excerpt excerpt category";
-
+      @include breakpoint(mobile-extra-large) {
-      @include viewport.until(sm) {
         grid-template-columns: auto min-content;
         grid-template-areas:
           " . dropdown"
@@ -445,21 +429,13 @@
         }
       }
     }
-
-    .badge-category__wrapper {
-      align-self: flex-end;
-      height: min-content;
-      max-width: 100%;
-    }
   }
 
   td.author-avatar {
     grid-area: avatar;
   }
-
   td.main-link .link-bottom-line {
     display: contents;
-
     .badge-category__wrapper {
       grid-area: category;
       display: flex;
@@ -468,10 +444,8 @@
       justify-self: flex-end;
     }
   }
-
   td.main-link .link-top-line {
     display: contents;
-
     .bookmark-metadata {
       grid-area: metadata;
       margin: 0;
@@ -479,12 +453,10 @@
       align-items: center;
       gap: var(--spacing-inline-xs);
     }
-
     .bookmark-metadata-item {
       margin: 0;
       vertical-align: middle;
     }
-
     .bookmark-status-with-link {
       grid-column: 1/-2;
       grid-row: 1/2;
@@ -495,10 +467,8 @@
     grid-area: excerpt;
     margin: 0;
   }
-
   .topic-list-data:last-of-type {
     display: contents;
-
     .bookmark-actions-dropdown {
       grid-area: dropdown;
       align-self: flex-start;
@@ -510,7 +480,6 @@
         align-items: center;
         background: transparent;
       }
-
       .select-kit-header-wrapper {
         height: 1em;
         width: 1em;
@@ -521,7 +490,6 @@
   .post-metadata.topic-list-data.updated-at {
     grid-area: update;
   }
-
   td.activity .post-activity {
     display: none;
   }
@@ -531,11 +499,7 @@
 .topic-list-item.assigned-list-item {
   .topic-status-card {
     display: none;
-    position: relative;
-    top: unset;
-    right: unset;
   }
-
   td.main-link .link-top-line {
     grid-column: 1/-3;
   }
@@ -543,18 +507,15 @@
   grid-template-areas:
     ". . . . . status dropdown"
     "activity . . . . likes-replies category";
-
+  @include breakpoint(mobile-extra-large) {
-  @include viewport.until(sm) {
     grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
     grid-template-areas:
       "category category . . . . status dropdown"
       ". . . . . . . . "
       "activity . . . . . . likes-replies";
   }
-
   .assign-topic-buttons {
     display: contents;
-
     .assign-actions-dropdown {
       grid-area: dropdown;
       justify-content: flex-end;
@@ -566,29 +527,31 @@
         align-items: center;
         background: transparent;
       }
-
       .select-kit-header-wrapper {
         height: 1em;
         width: 1em;
       }
     }
   }
-
   td.topic-category-status-data {
     display: contents;
   }
+  .topic-status-card {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
 }
 
 // User Messages
+
 body.user-messages-page {
   .topic-list-body {
     gap: 0;
   }
-
   .topic-list .topic-list-data.posters a:not(.latest) {
     display: block;
   }
-
   .topic-list-item {
     border-radius: 0;
     box-shadow: none;
@@ -600,43 +563,30 @@ body.user-messages-page {
     grid-template-areas: "title activity" "posters .";
     grid-template-columns: auto auto;
     grid-template-rows: auto auto;
-
+    td.topic-category-data,
+    td.topic-likes-replies-data,
+    td.topic-status-data {
+      display: none;
+    }
+    &.visited .main-link .link-top-line {
+      font-weight: normal;
+      grid-area: title;
+    }
     &:hover {
-      .discourse-no-touch & {
       background-color: var(--primary-low);
       border-color: var(--primary-200);
     }
-    }
-
-    td.topic-category-data,
-    td.topic-likes-replies-data,
-    td.topic-status-data,
-    td.topic-creator-data {
-      display: none;
-    }
-
-    .main-link .link-top-line {
-      grid-area: title;
-    }
-
-    &.visited .main-link .link-top-line {
-      font-weight: normal;
-    }
-
     td.topic-activity-data {
       grid-area: activity;
     }
-
     td.topic-list-data.posters {
       grid-area: posters;
       display: flex;
       align-items: center;
       height: 100%;
-
       a {
         margin-right: 4px;
       }
-
       .avatar {
         width: 20px;
         height: 20px;
@@ -647,8 +597,60 @@ body.user-messages-page {
   }
 }
 
-.event-date-container {
+// Bulk select
-  display: inline-flex;
+
-  position: relative;
+.bulk-select-enabled .topic-list-body .topic-list-item {
-  top: -0.25em; // optical alignment
+  grid-template-areas:
+    "bulk-select . . . status"
+    "bulk-select activity activity . category";
+  td.topic-likes-replies-data {
+    display: none;
+  }
+  td.main-link .link-top-line,
+  &.--has-status-card td.main-link .link-top-line {
+    grid-column: 2/-1;
+    font-weight: 500;
+  }
+  .topic-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+  }
+  &.excerpt-expanded {
+    grid-template-areas:
+      "bulk-select . . . status" "bulk-select activity . . ."
+      "bulk-select excerpt excerpt excerpt category";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-areas:
+        "bulk-select category . . .  status"
+        "bulk-select . . . . ."
+        "bulk-select activity activity . . .";
+    }
+  }
+  .bulk-select {
+    grid-area: bulk-select;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+    label {
+      margin: 0;
+    }
+  }
+  @include breakpoint(large) {
+    grid-template-areas:
+      "bulk-select . . . status"
+      "bulk-select activity activity . category";
+  }
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-column: 2/-1;
+      grid-row: 2;
+      font-weight: 500;
+    }
+    grid-template-areas:
+      "bulk-select category . . .  status"
+      "bulk-select . . . . ."
+      "bulk-select activity activity . . .";
+  }
 }

scss/topic.scss

@@ -1,5 +1,3 @@
-@use "lib/viewport";
-
 .post-stream {
   .contents {
     font-size: var(--font-up-1);
@@ -8,14 +6,21 @@
   }
 }
 
+.container.posts .topic-navigation:not(.with-topic-progress) {
+  // super fragile because new sticky topic title doesnt 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?
-
   .timeline-scrollarea {
     border-left: 1px solid var(--accent-color);
 
     .timeline-scroller {
-      @include viewport.from(lg) {
+      @include breakpoint("medium", $rule: min-width) {
         margin-left: -4.5px;
         background: var(--d-content-background);
         height: 40px !important; // height is coming from element style have no other choice
@@ -26,11 +31,9 @@
         line-height: 1;
       }
     }
-
     .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);
@@ -41,7 +44,7 @@
 
 //should probably get rid of this extra specificity class in core?
 .timeline-container.timeline-fullscreen {
-  @include viewport.until(lg) {
+  @include breakpoint("medium", $rule: max-width) {
     .topic-timeline
       .timeline-scrollarea
       .timeline-scroller
@@ -53,8 +56,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/variables.scss

@@ -3,7 +3,7 @@
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-
+  // --d-sidebar-row-height: 2.8em;
   //the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
   --spacing-block-xs: 0.25em;
   --spacing-block-s: 0.5em;

scss/welcome-banner.scss

@@ -1,5 +1,3 @@
-@use "lib/viewport";
-
 .welcome-banner {
   &__wrap {
     display: grid;
@@ -11,11 +9,11 @@
     padding: 1.5em 0 2.5em;
     margin-bottom: 0;
 
-    @media screen and (width <= 768px) {
+    @media screen and (max-width: 768px) {
       padding: 1em;
     }
 
-    @include viewport.until(sm) {
+    @include breakpoint("mobile-extra-large") {
       display: block;
       padding: 0.5em;
       margin-top: 0;
@@ -26,27 +24,22 @@
       grid-row: 1/-1;
       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;
       }
     }
-
     p {
       display: none;
     }
@@ -56,29 +49,24 @@
   .search-menu-container .search-input {
     background: var(--d-content-background);
     border: 1px solid var(--search-color);
-    box-shadow: 0 4px 10px rgb(52, 6, 121, 15%);
+    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
   }
-
   .search-menu .search-input:focus-within,
   .search-menu-container .search-input:focus-within {
     border: 1px solid var(--search-color);
     outline: 2px solid var(--search-color);
   }
-
   .search-menu .d-icon,
   .search-menu .searching .d-icon,
   .search-menu .searching .show-advanced-search .d-icon {
     color: var(--search-color);
   }
-
   .panel-body {
     z-index: z("dropdown");
   }
-
   .results {
     background: var(--d-content-background);
   }
-
   &__title {
     grid-column: 1/2;
     grid-row: 1/-1;
@@ -87,30 +75,26 @@
     margin: 0;
     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;
       text-align: center;
       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

@@ -39,7 +39,6 @@ describe "Horizon theme | High level", type: :system do
         "topic-status-data",
         "topic-category-data",
         "topic-likes-replies-data",
-        "topic-creator-data",
         "topic-activity-data",
       ],
     )

stylelint.config.mjs

@@ -1,3 +0,0 @@
-export default {
-  extends: ["@discourse/lint-configs/stylelint"],
-};