From be513ed9a330eb616f71bcb02b637b22e75ce423 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Thu, 13 Feb 2025 23:58:19 +0100
Subject: [PATCH] DEV: Fix all `mixed-decls` sass deprecations (#31343)

```
WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls
```
---
 .../stylesheets/common/admin/admin_base.scss  |  6 +--
 .../stylesheets/common/admin/customize.scss   |  3 +-
 .../stylesheets/common/admin/staff_logs.scss  |  2 +-
 .../stylesheets/common/admin/users.scss       |  2 +-
 .../stylesheets/common/base/compose.scss      | 19 +++++-----
 .../stylesheets/common/base/directory.scss    | 12 +++---
 .../stylesheets/common/base/discourse.scss    |  7 ++--
 .../common/base/edit-category.scss            |  2 +-
 .../stylesheets/common/base/header.scss       | 11 +++---
 .../common/base/magnific-popup.scss           |  3 +-
 .../stylesheets/common/base/menu-panel.scss   | 23 ++++--------
 app/assets/stylesheets/common/base/modal.scss |  7 ++--
 .../stylesheets/common/base/onebox.scss       | 24 +++++++-----
 .../stylesheets/common/base/popup-menu.scss   |  3 +-
 .../stylesheets/common/base/reviewables.scss  | 12 +++---
 .../stylesheets/common/base/search-menu.scss  |  3 --
 .../stylesheets/common/base/search.scss       |  2 +-
 .../common/base/sidebar-section.scss          | 11 +++---
 .../stylesheets/common/base/sidebar.scss      | 37 ++++++++-----------
 .../stylesheets/common/base/topic-footer.scss | 15 ++++----
 .../stylesheets/common/base/topic-post.scss   | 20 +++++-----
 .../stylesheets/common/base/user-badges.scss  |  2 +-
 app/assets/stylesheets/common/base/user.scss  |  4 +-
 .../common/components/bookmark-modal.scss     |  3 +-
 .../common/components/buttons.scss            | 16 ++++----
 .../components/calendar-date-time-input.scss  |  7 ++--
 .../common/components/d-toggle-switch.scss    |  6 +--
 .../components/powered-by-discourse.scss      | 19 +++++-----
 .../common/components/user-card.scss          |  7 ++--
 app/assets/stylesheets/common/d-editor.scss   | 16 ++++----
 .../common/form-kit/_control-code.scss        |  8 ++--
 .../common/form-kit/_control-composer.scss    |  5 ++-
 .../common/form-kit/_control-input.scss       |  4 +-
 .../common/form-kit/_control-menu.scss        |  2 +-
 .../common/form-kit/_control-textarea.scss    | 17 ++++-----
 .../common/form-kit/_default-input-mixin.scss |  2 +
 .../stylesheets/common/foundation/mixins.scss |  2 +-
 .../common/rich-editor/rich-editor.scss       |  3 +-
 .../common/software-update-prompt.scss        | 12 +++---
 .../stylesheets/common/topic-timeline.scss    | 17 +++++----
 app/assets/stylesheets/desktop/compose.scss   | 17 +++++----
 app/assets/stylesheets/desktop/discourse.scss |  5 ++-
 app/assets/stylesheets/desktop/modal.scss     |  2 +-
 .../stylesheets/desktop/topic-post.scss       | 13 ++++---
 .../mobile/components/emoji-picker.scss       |  7 ++--
 .../stylesheets/mobile/modal-overrides.scss   |  2 +-
 app/assets/stylesheets/mobile/modal.scss      | 10 ++---
 .../stylesheets/common/chat-composer.scss     |  7 +---
 48 files changed, 226 insertions(+), 213 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 6943b0425a1..cd3f112daea 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1057,8 +1057,8 @@ table#user-badges {
     }
 
     .remove-value-btn {
-      @include value-btn;
       margin-right: 0.25em;
+      @include value-btn;
     }
 
     .shift-up-value-btn,
@@ -1117,9 +1117,9 @@ table#user-badges {
 .value .add-value-btn,
 .shift-up-value-btn,
 .shift-down-value-btn {
-  @include value-btn;
   margin-right: 0 !important;
   margin-left: 0.25em;
+  @include value-btn;
 }
 
 .secret-value-list {
@@ -1148,9 +1148,9 @@ table#user-badges {
     }
 
     .add-value-btn {
-      @include value-btn;
       margin-left: 0.25em;
       margin-top: 0.125em;
+      @include value-btn;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 059fff1afba..b5edf5fc777 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -815,6 +815,8 @@
     margin-left: 0;
 
     li {
+      display: table-row;
+
       &.disabled-child {
         .child-link {
           color: var(--primary-medium);
@@ -828,7 +830,6 @@
       .btn {
         margin-left: 5px;
       }
-      display: table-row;
 
       .col.child-link {
         padding-right: 10px;
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 1a45bcc186e..1c3b1dd93c6 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -136,6 +136,7 @@
 .staff-action-logs-controls {
   display: flex;
   align-items: center;
+  margin: 0 0 1em 0;
 
   .select-kit {
     margin: 0 0.5em;
@@ -144,7 +145,6 @@
   button {
     margin-left: auto;
   }
-  margin: 0 0 1em 0;
 
   a.filter {
     .label {
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
index 2d7f06974ab..ad9f9f289d7 100644
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -13,6 +13,7 @@
   display: flex;
   align-items: center;
   padding: 10px 5px;
+  border-top: 1px solid var(--primary-low);
 
   &:nth-of-type(1) {
     border-top: 0;
@@ -21,7 +22,6 @@
   &.highlight-danger {
     background-color: var(--danger-low);
   }
-  border-top: 1px solid var(--primary-low);
 
   &::before,
   &::after {
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 70a10f82736..843f374cf22 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -12,26 +12,25 @@ html.composer-open {
   bottom: 0;
   right: 0;
   left: 0;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   max-width: $reply-area-max-width;
   width: 100%;
   height: 0;
   min-height: 0;
-
-  &.hide-preview {
-    max-width: 740px;
-  }
-
-  @media screen and (max-width: 1200px) {
-    min-width: 0;
-  }
   z-index: z("composer", "content");
   transition: height 0.2s, max-width 0.2s, padding-bottom 0.2s, top 0.2s,
     transform 0.2s, min-height 0.2s;
   background-color: var(--secondary);
   box-shadow: var(--shadow-composer);
 
+  @media screen and (max-width: 1200px) {
+    min-width: 0;
+  }
+
+  &.hide-preview {
+    max-width: 740px;
+  }
+
   .reply-area {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 91ed51458c5..57e08b917d2 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -4,12 +4,13 @@
 }
 
 .directory {
+  margin-bottom: 100px;
+  background: var(--d-content-background);
+
   .directory-value-list-item:not(:empty)
     ~ .directory-value-list-item:not(:empty)::before {
     content: "| ";
   }
-  margin-bottom: 100px;
-  background: var(--d-content-background);
 
   &.users-directory {
     .directory-group-selector {
@@ -284,14 +285,15 @@
     }
 
     &__row {
-      &:first-child {
-        border-top: 1px solid var(--primary-low);
-      }
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
       border-bottom: 1px solid var(--primary-low);
       padding: 0.85em 0.5em 1em;
       gap: 0 10%;
+
+      &:first-child {
+        border-top: 1px solid var(--primary-low);
+      }
     }
 
     &__header {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index c5c75ed8418..3a9738bfaf1 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -92,8 +92,8 @@ small {
 }
 
 blockquote {
-  @include post-aside;
   clear: both;
+  @include post-aside;
 }
 
 h1,
@@ -304,6 +304,9 @@ textarea {
 // Common Classes
 .sortable {
   white-space: nowrap;
+  cursor: pointer;
+
+  @include user-select(none);
 
   .discourse-no-touch & {
     &:hover,
@@ -315,8 +318,6 @@ textarea {
   .d-icon {
     margin-left: 0.25em;
   }
-  @include unselectable;
-  cursor: pointer;
 
   button {
     background: none;
diff --git a/app/assets/stylesheets/common/base/edit-category.scss b/app/assets/stylesheets/common/base/edit-category.scss
index 7abf64588a3..266ccb69662 100644
--- a/app/assets/stylesheets/common/base/edit-category.scss
+++ b/app/assets/stylesheets/common/base/edit-category.scss
@@ -189,6 +189,7 @@ div.edit-category {
     .required-tag-group-row {
       display: flex;
       gap: 0.5em;
+      margin-bottom: 1em;
 
       > * {
         margin: 0;
@@ -197,7 +198,6 @@ div.edit-category {
       input[type="number"] {
         width: 4em;
       }
-      margin-bottom: 1em;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 7d253b77e26..b76beb79abd 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -49,15 +49,16 @@
     align-items: center;
     height: 100%;
     animation: fadein 0.5s;
-    @media (prefers-reduced-motion) {
-      animation-duration: 0s;
-    }
 
     // min-width acts as a placeholder if the small logo takes a while to load
     // it prevents topic title from shifting after the small logo loads
     // it's set to match the #site-logo height so square small logos don't resize when titles dock
     min-width: var(--d-logo-height);
 
+    @media (prefers-reduced-motion) {
+      animation-duration: 0s;
+    }
+
     a,
     a:visited {
       min-width: 0;
@@ -442,11 +443,11 @@ $mobile-avatar-height: 1.532em;
   .trigger-user-card {
     .icon {
       height: $avatar-height;
+      display: inline-block;
 
       .mobile-view & {
         height: $mobile-avatar-height;
       }
-      display: inline-block;
 
       img {
         height: 100%;
@@ -466,11 +467,11 @@ $mobile-avatar-height: 1.532em;
       display: flex;
       align-items: center;
       height: $avatar-height;
+      color: var(--primary-high);
 
       .mobile-view & {
         height: $mobile-avatar-height;
       }
-      color: var(--primary-high);
 
       .d-icon {
         margin-right: 5px;
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index 026ac6a9e94..8bdfcdcb339 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -620,10 +620,11 @@ button {
   /* start state */
   .mfp-content {
     opacity: 0;
+    transform: scale(0.8);
+
     @media screen and (prefers-reduced-motion: no-preference) {
       transition: all 0.2s;
     }
-    transform: scale(0.8);
   }
 
   &.mfp-bg {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 75e21a8c655..a1151e3ee1b 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -6,13 +6,8 @@
 
   // ensure there's always space to click outside on tiny devices
   max-width: 90vw;
-
-  --100dvh: 100%;
-  @supports (height: 100dvh) {
-    --100dvh: 100dvh;
-  }
   box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.5);
-  height: var(--100dvh);
+  height: 100dvh;
 
   .panel-body {
     width: 100%;
@@ -369,13 +364,14 @@
     }
 
     .profile-tab-btn {
+      justify-content: unset;
+      line-height: var(--line-height-large);
+      width: 100%;
+
       .relative-date {
         font-size: var(--font-down-3);
         color: var(--primary-medium);
       }
-      justify-content: unset;
-      line-height: var(--line-height-large);
-      width: 100%;
 
       .d-icon {
         padding: 0;
@@ -420,6 +416,9 @@
   padding-top: 0.75em;
   margin-top: -1px;
 
+  /* as a big ol' click target, don't let text inside be selected */
+  @include unselectable;
+
   &:focus {
     outline: none;
   }
@@ -548,9 +547,6 @@
       > div {
         overflow: hidden; // clears the text from wrapping below icons
         overflow-wrap: anywhere;
-        @supports not (overflow-wrap: anywhere) {
-          word-break: break-word;
-        }
 
         // Truncate items with more than 2 lines.
         @include line-clamp(2);
@@ -613,9 +609,6 @@
       background: var(--primary-low);
     }
   }
-
-  /* as a big ol' click target, don't let text inside be selected */
-  @include unselectable;
 }
 
 // Styles to have user avatar positioned and sized correctly
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index b2bee9a9b2c..385f21677df 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -167,11 +167,12 @@
 .modal-backdrop,
 .modal-backdrop.fade.in {
   animation: fade 0.3s;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+
   @media (prefers-reduced-motion) {
     animation-duration: 0s;
   }
-  opacity: 0.9;
-  filter: alpha(opacity=90);
 }
 
 // fade in
@@ -229,11 +230,11 @@
   .nav {
     padding: 10px 30px 10px 15px;
     background-color: var(--secondary);
+    border-bottom: 1px solid var(--primary-low);
 
     li > a {
       font-size: var(--font-0);
     }
-    border-bottom: 1px solid var(--primary-low);
   }
 
   &.hidden {
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index c3ff382c7a8..65d0aae3301 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -15,11 +15,12 @@ a.loading-onebox {
 }
 
 .onebox-result {
-  @include post-aside;
   margin-top: 15px;
   padding: 12px;
   font-size: var(--font-0);
 
+  @include post-aside;
+
   .onebox-result-body {
     padding-top: 5px;
 
@@ -73,13 +74,14 @@ a.loading-onebox {
     height: 20px;
 
     .info {
+      position: absolute;
+      font-size: var(--font-0);
+
       a {
         color: black;
         text-decoration: none;
         padding-right: 10px;
       }
-      position: absolute;
-      font-size: var(--font-0);
 
       img.favicon {
         margin-right: 3px;
@@ -151,13 +153,14 @@ aside.onebox {
     img:not(.avatar, .onebox-avatar-inline) {
       max-height: 170px;
       max-width: 20%;
-      @media all and (max-width: 600px) {
-        max-width: 35%;
-      }
       height: auto;
       float: left;
       margin-right: 1em;
 
+      @media all and (max-width: 600px) {
+        max-width: 35%;
+      }
+
       &.onebox-full-image {
         max-height: none;
         max-width: none;
@@ -296,6 +299,10 @@ aside.onebox {
     }
 
     .video-icon {
+      bottom: 15px;
+      right: 10px;
+      position: absolute;
+
       &::before {
         opacity: 0.8;
 
@@ -304,9 +311,6 @@ aside.onebox {
           '<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
         );
       }
-      bottom: 15px;
-      right: 10px;
-      position: absolute;
     }
   }
 }
@@ -967,6 +971,7 @@ aside.onebox.mixcloud-preview {
     .mixcloud-text {
       padding-left: 170px;
       font-family: sans-serif;
+      color: gray;
 
       h3 {
         font-size: 13px;
@@ -980,7 +985,6 @@ aside.onebox.mixcloud-preview {
         font-size: 12px;
         font-weight: 200;
       }
-      color: gray;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/popup-menu.scss b/app/assets/stylesheets/common/base/popup-menu.scss
index 9fc8c4cb64e..130c9752248 100644
--- a/app/assets/stylesheets/common/base/popup-menu.scss
+++ b/app/assets/stylesheets/common/base/popup-menu.scss
@@ -57,11 +57,12 @@
 
       &:focus,
       &:hover {
+        background: var(--danger-low);
+
         .d-icon,
         .d-button-label {
           color: var(--danger);
         }
-        background: var(--danger-low);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index ec6e3749858..f5a6bf2d513 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -96,6 +96,7 @@
     border-bottom: 1px solid var(--primary-low);
     padding-bottom: 0.25em;
     display: flex;
+    margin-bottom: 0.5em;
 
     .name {
       width: 8em;
@@ -109,7 +110,6 @@
       ); // subtracting width of name and margin-right
       word-wrap: break-word;
     }
-    margin-bottom: 0.5em;
   }
 }
 
@@ -236,6 +236,7 @@
   background: var(--primary-very-low);
   padding: 1.5rem;
   margin-block: 3rem;
+  padding-bottom: 1em;
 
   .show-raw-email {
     color: var(--primary-medium);
@@ -472,7 +473,6 @@
       margin-right: 0.5em;
     }
   }
-  padding-bottom: 1em;
 }
 
 .reviewable-stale {
@@ -607,17 +607,20 @@
 }
 
 .editable-fields {
+  width: 100%;
+
   .editable-created-by {
     display: flex;
+    margin-bottom: 0.5em;
 
     .avatar {
       margin-right: 0.25em;
     }
-    margin-bottom: 0.5em;
   }
-  width: 100%;
 
   .editable-field {
+    margin-bottom: 0.5em;
+
     .mini-tag-chooser {
       margin: 0;
     }
@@ -631,7 +634,6 @@
       width: 100%;
       height: 10em;
     }
-    margin-bottom: 0.5em;
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index a87374dec32..fa9053ef814 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -431,9 +431,6 @@ $search-pad-horizontal: 0.5em;
     .topic-title {
       color: var(--tertiary);
       overflow-wrap: anywhere;
-      @supports not (overflow-wrap: anywhere) {
-        word-break: break-word;
-      }
       margin-right: 0.25em;
     }
   }
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 00cdbcf09e9..3f88f5357c4 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -18,8 +18,8 @@
   }
 
   .search-header {
-    @include search-page-spacing;
     background: var(--primary-very-low);
+    @include search-page-spacing;
   }
 
   .warning {
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index 2afdb877575..d6fcc8ef3ab 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -24,6 +24,12 @@
 
     .btn.dropdown-select-box-header,
     .sidebar-section-header-button {
+      background: transparent;
+      border: none;
+      margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
+      padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
+        calc(var(--d-sidebar-row-horizontal-padding) / 3);
+
       .discourse-no-touch & {
         transition: all 0.25s;
         opacity: 0;
@@ -40,11 +46,6 @@
           opacity: 1;
         }
       }
-      background: transparent;
-      border: none;
-      margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
-      padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
-        calc(var(--d-sidebar-row-horizontal-padding) / 3);
 
       .d-icon {
         font-size: var(--font-down-1);
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index f2a56dc88ce..4c613b7d64c 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -1,9 +1,5 @@
 :root {
   --d-sidebar-width: #{$d-sidebar-width};
-  @include breakpoint(large) {
-    --d-sidebar-width: #{$d-sidebar-narrow-width};
-  }
-
   --d-sidebar-row-horizontal-padding: 1rem;
 
   // ems so height is variable along with font size
@@ -48,6 +44,10 @@
   --d-sidebar-active-icon-color: var(--d-sidebar-link-color);
   --d-sidebar-active-prefix-background: var(--primary-200);
   --d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary);
+
+  @include breakpoint(large) {
+    --d-sidebar-width: #{$d-sidebar-narrow-width};
+  }
 }
 
 .sidebar-row {
@@ -63,20 +63,15 @@
   position: sticky;
   top: var(--main-outlet-offset);
   background: var(--d-sidebar-background);
-
-  @include unselectable;
-
-  // 1dvh with fallback for old browsers
-  --1dvh: 1vh;
-  @supports (height: 1dvh) {
-    --1dvh: 1dvh;
-  }
-  height: calc(
-    var(--composer-vh, var(--1dvh)) * 100 - var(--main-outlet-offset, 0px)
-  );
+  height: calc(var(--composer-vh, 1dvh) * 100 - var(--main-outlet-offset, 0px));
   align-self: start;
   overflow-y: auto;
 
+  // back-compat for themes
+  --1dvh: 1dvh;
+
+  @include unselectable;
+
   .sidebar-container {
     display: flex;
     flex-direction: column;
@@ -103,10 +98,6 @@
     overflow-x: hidden;
     overflow-y: overlay;
 
-    > .sidebar-section-wrapper:last-child {
-      border-bottom: 0;
-    }
-
     // custom scrollbar styling
     --scrollbarBg: transparent;
     --scrollbarThumbBg: var(--primary-low);
@@ -115,6 +106,10 @@
     transition: scrollbar-color 0.25s ease-in-out;
     transition-delay: 0.5s;
 
+    > .sidebar-section-wrapper:last-child {
+      border-bottom: 0;
+    }
+
     &::-webkit-scrollbar {
       width: var(--scrollbarWidth);
     }
@@ -130,11 +125,11 @@
 
     &:hover {
       scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
+      transition-delay: 0s;
 
       &::-webkit-scrollbar-thumb {
         background-color: var(--scrollbarThumbBg);
       }
-      transition-delay: 0s;
     }
 
     &__back-to-forum {
@@ -379,11 +374,11 @@
     background: none;
     margin-bottom: 0;
     height: 2em;
+    width: 100%;
 
     &:focus-within {
       outline: 0;
     }
-    width: 100%;
   }
 
   &__clear {
diff --git a/app/assets/stylesheets/common/base/topic-footer.scss b/app/assets/stylesheets/common/base/topic-footer.scss
index 59f4a07584a..accca7491cf 100644
--- a/app/assets/stylesheets/common/base/topic-footer.scss
+++ b/app/assets/stylesheets/common/base/topic-footer.scss
@@ -1,14 +1,14 @@
 #topic-footer-buttons {
   display: flex;
-
-  html.anon & {
-    justify-content: end;
-  }
   max-width: calc(
     var(--topic-avatar-width) + var(--topic-body-width) +
       var(--topic-body-width-padding) * 2
   );
 
+  html.anon & {
+    justify-content: end;
+  }
+
   .topic-footer-main-buttons {
     display: flex;
     gap: 0.5rem;
@@ -51,14 +51,15 @@
 }
 
 #topic-progress-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  overflow: hidden;
+
   &.docked {
     .toggle-admin-menu {
       display: none;
     }
   }
-  display: flex;
-  justify-content: flex-end;
-  overflow: hidden;
 
   .btn {
     border: 0;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 054612bac7a..fceab9f7402 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -22,9 +22,6 @@
   overflow: hidden;
 
   &::before {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: placeHolderShimmer 4s linear infinite forwards;
-    }
     position: absolute;
     left: 0;
     content: "";
@@ -36,6 +33,10 @@
     );
     height: 45px;
     width: 700px;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: placeHolderShimmer 4s linear infinite forwards;
+    }
   }
 }
 
@@ -635,10 +636,12 @@ aside.quote {
   margin-bottom: 1em;
 
   .title {
-    @include post-aside;
     color: var(--primary-high-or-secondary-low);
     padding: 0.8em 0.8em 0 0.8em;
 
+    @include post-aside;
+    @include unselectable;
+
     // blockquote is underneath this and has top margin
     .avatar {
       margin-right: 0.5em;
@@ -647,8 +650,6 @@ aside.quote {
     img {
       margin-top: -0.26em;
     }
-
-    @include unselectable;
   }
 
   // blockquote is docked within aside for content
@@ -1335,15 +1336,16 @@ span.mention {
 
 .broken-image,
 .blocked-hotlinked-placeholder {
-  &:not(a) {
-    color: var(--primary-low-mid-or-secondary-high);
-  }
   display: inline-flex;
   flex-direction: column;
   border: 1px solid var(--primary-low);
   align-items: center;
   justify-content: center;
 
+  &:not(a) {
+    color: var(--primary-low-mid-or-secondary-high);
+  }
+
   .d-icon {
     margin: 16px;
     font-size: var(--font-up-5);
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 6edd43d8397..9bb931718f9 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -99,6 +99,7 @@
   text-align: left;
   display: block;
   margin: 20px 0;
+  width: 800px;
 
   .badge-info {
     display: none;
@@ -116,7 +117,6 @@
     margin: 0;
     padding: 0;
   }
-  width: 800px;
 
   &::after {
     content: "";
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index c27fa0099ea..635e6b35c9e 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -402,6 +402,8 @@
 }
 
 .avatar-selector {
+  --label-max-width: 300px;
+
   .avatar-choice {
     display: grid;
     grid-template-columns: 2em 1fr auto;
@@ -429,8 +431,6 @@
     }
   }
 
-  --label-max-width: 300px;
-
   label.radio {
     display: flex;
     align-items: center;
diff --git a/app/assets/stylesheets/common/components/bookmark-modal.scss b/app/assets/stylesheets/common/components/bookmark-modal.scss
index cf90e19e68d..85084139093 100644
--- a/app/assets/stylesheets/common/components/bookmark-modal.scss
+++ b/app/assets/stylesheets/common/components/bookmark-modal.scss
@@ -45,10 +45,11 @@
   }
 
   .bookmark-options-panel {
+    margin-bottom: 18px;
+
     .select-kit {
       width: 100%;
     }
-    margin-bottom: 18px;
 
     label {
       display: flex;
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index c46f7217a90..7a4a0bf8340 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -13,18 +13,12 @@
   $hover-bg-color: var(--primary-medium),
   $hover-icon-color: var(--primary-low)
 ) {
-  @include form-item-sizing;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   font-weight: normal;
   color: $text-color;
-
-  &:visited {
-    // covers cases where we add button classes to links
-    color: $text-color;
-  }
   background-color: $bg-color;
   background-image: linear-gradient(
     to bottom,
@@ -35,6 +29,13 @@
   transition: var(--d-button-transition);
   cursor: pointer;
 
+  @include form-item-sizing;
+
+  &:visited {
+    // covers cases where we add button classes to links
+    color: $text-color;
+  }
+
   .d-icon {
     color: $icon-color;
     margin-right: 0.45em;
@@ -109,6 +110,8 @@
 
   &[disabled],
   &.disabled {
+    cursor: not-allowed;
+
     &:not(.is-loading) {
       opacity: 0.4;
     }
@@ -121,7 +124,6 @@
         color: $icon-color;
       }
     }
-    cursor: not-allowed;
   }
 
   .loading-container {
diff --git a/app/assets/stylesheets/common/components/calendar-date-time-input.scss b/app/assets/stylesheets/common/components/calendar-date-time-input.scss
index 37fb5fd94f6..91bdb2b7de1 100644
--- a/app/assets/stylesheets/common/components/calendar-date-time-input.scss
+++ b/app/assets/stylesheets/common/components/calendar-date-time-input.scss
@@ -1,7 +1,4 @@
 .calendar-date-time-input {
-  .fake-input {
-    display: none;
-  }
   padding: 5px;
   border: 1px solid var(--primary-low);
   z-index: 1;
@@ -10,6 +7,10 @@
   box-sizing: border-box;
   margin-left: 1em;
 
+  .fake-input {
+    display: none;
+  }
+
   .date-picker {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/common/components/d-toggle-switch.scss b/app/assets/stylesheets/common/components/d-toggle-switch.scss
index 1421746c1cd..6209574c5e3 100644
--- a/app/assets/stylesheets/common/components/d-toggle-switch.scss
+++ b/app/assets/stylesheets/common/components/d-toggle-switch.scss
@@ -1,6 +1,9 @@
 .d-toggle-switch {
   --toggle-switch-width: 45px;
   --toggle-switch-height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 
   &:focus {
     .d-toggle-switch__checkbox-slider {
@@ -19,9 +22,6 @@
       background-color: var(--tertiary-hover);
     }
   }
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
 
   &__label {
     position: relative;
diff --git a/app/assets/stylesheets/common/components/powered-by-discourse.scss b/app/assets/stylesheets/common/components/powered-by-discourse.scss
index aa426b8e5dd..999a6e867c2 100644
--- a/app/assets/stylesheets/common/components/powered-by-discourse.scss
+++ b/app/assets/stylesheets/common/components/powered-by-discourse.scss
@@ -1,13 +1,4 @@
 .powered-by-discourse {
-  .admin-area &,
-  .has-full-page-chat &,
-  .static-login &,
-  .invite-page &,
-  .account-created-page &,
-  .admin-invite-page &,
-  .activate-account-page & {
-    display: none !important;
-  }
   grid-area: below-content;
   justify-self: start;
   font-size: var(--font-down-1);
@@ -19,6 +10,16 @@
   margin-bottom: 0.45em;
   color: var(--primary-medium);
 
+  .admin-area &,
+  .has-full-page-chat &,
+  .static-login &,
+  .invite-page &,
+  .account-created-page &,
+  .admin-invite-page &,
+  .activate-account-page & {
+    display: none !important;
+  }
+
   &:visited {
     color: var(--primary-medium);
   }
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 9ec66bfe4ed..1ec8eeb4981 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -23,9 +23,6 @@
   overflow: hidden;
 
   &::before {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: placeHolderShimmer 4s linear infinite forwards;
-    }
     position: absolute;
     left: 0;
     content: "";
@@ -37,6 +34,10 @@
     );
     height: var(--avatar-width);
     width: var(--card-width);
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: placeHolderShimmer 4s linear infinite forwards;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index b4ed4ceb3e2..de3a6d3487f 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -308,19 +308,21 @@
 .d-editor-button-bar {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr));
-  @include breakpoint(tablet) {
-    // occupy available space on narrower screens
-    grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
-  }
-  @include breakpoint(mobile-medium) {
-    font-size: var(--font-down-1);
-  }
   align-items: center;
   border-bottom: 1px solid var(--primary-low);
   width: 100%;
   box-sizing: border-box;
   flex-shrink: 0;
 
+  @include breakpoint(tablet) {
+    // occupy available space on narrower screens
+    grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
+  }
+
+  @include breakpoint(mobile-medium) {
+    font-size: var(--font-down-1);
+  }
+
   .btn:focus {
     @include default-focus;
   }
diff --git a/app/assets/stylesheets/common/form-kit/_control-code.scss b/app/assets/stylesheets/common/form-kit/_control-code.scss
index 24448b7e9f6..574039e26db 100644
--- a/app/assets/stylesheets/common/form-kit/_control-code.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-code.scss
@@ -17,11 +17,13 @@
 
   .ace-wrapper[data-disabled="false"] {
     .ace_focus {
-      @include default-input;
-      height: unset;
-      border-color: var(--tertiary);
       outline: 2px solid var(--tertiary);
       outline-offset: -1px;
+
+      @include default-input {
+        height: unset;
+        border-color: var(--tertiary);
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/common/form-kit/_control-composer.scss b/app/assets/stylesheets/common/form-kit/_control-composer.scss
index 86fa5aceefc..67741ac84f0 100644
--- a/app/assets/stylesheets/common/form-kit/_control-composer.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-composer.scss
@@ -20,8 +20,9 @@
   }
 
   .d-editor-textarea-wrapper {
-    @include default-input;
-    padding: 0 !important;
+    @include default-input {
+      padding: 0 !important;
+    }
   }
 
   .d-editor-input {
diff --git a/app/assets/stylesheets/common/form-kit/_control-input.scss b/app/assets/stylesheets/common/form-kit/_control-input.scss
index 987aff4f692..4bb63773719 100644
--- a/app/assets/stylesheets/common/form-kit/_control-input.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-input.scss
@@ -1,9 +1,9 @@
 .form-kit__control-input {
-  @include default-input;
   z-index: 1;
-  margin: 0 !important;
   min-width: auto !important;
 
+  @include default-input;
+
   .form-kit__field.has-error & {
     border-color: var(--danger);
   }
diff --git a/app/assets/stylesheets/common/form-kit/_control-menu.scss b/app/assets/stylesheets/common/form-kit/_control-menu.scss
index fc07ae59f1a..ff3eb29d9fc 100644
--- a/app/assets/stylesheets/common/form-kit/_control-menu.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-menu.scss
@@ -1,6 +1,6 @@
 .form-kit__control-menu-trigger {
-  @include default-input;
   justify-content: space-between;
+  @include default-input;
 }
 
 .form-kit__control-menu-content {
diff --git a/app/assets/stylesheets/common/form-kit/_control-textarea.scss b/app/assets/stylesheets/common/form-kit/_control-textarea.scss
index 92e2b4c2fa6..d5375b01c11 100644
--- a/app/assets/stylesheets/common/form-kit/_control-textarea.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-textarea.scss
@@ -1,14 +1,11 @@
 .form-kit__control-textarea {
-  @include default-input;
-
-  // reset textarea styles
-  width: 100% !important;
-  margin: 0 !important;
-  min-width: auto !important;
-  padding: 0.5em !important;
-  height: 150px !important;
-
   // prevents firefox/chrome to add spacing under textarea
   display: block;
-  border-radius: var(--d-input-border-radius);
+
+  @include default-input {
+    // reset textarea styles
+    height: 150px !important;
+    min-width: auto !important;
+    padding: 0.5em !important;
+  }
 }
diff --git a/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss b/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss
index 32401e0a2df..f57fedffe5c 100644
--- a/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss
+++ b/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss
@@ -9,6 +9,8 @@
   margin: 0 !important;
   appearance: none;
 
+  @content;
+
   @include breakpoint(mobile-large) {
     width: 100% !important;
     height: 2.25em;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 350788eee0d..d93f48dc59a 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -132,8 +132,8 @@ $hpad: 0.65em;
 }
 
 @mixin unselectable {
-  @include user-select(none);
   cursor: default;
+  @include user-select(none);
 }
 
 // Stuff we repeat
diff --git a/app/assets/stylesheets/common/rich-editor/rich-editor.scss b/app/assets/stylesheets/common/rich-editor/rich-editor.scss
index 8d39ef0b605..37caeae953a 100644
--- a/app/assets/stylesheets/common/rich-editor/rich-editor.scss
+++ b/app/assets/stylesheets/common/rich-editor/rich-editor.scss
@@ -15,12 +15,13 @@
 
   > div:first-child,
   > details:first-child {
+    margin-top: 0.5rem;
+
     // This is hacky, but helps having the leading gapcursor at the right position
     &.ProseMirror-gapcursor {
       position: relative;
       display: block;
     }
-    margin-top: 0.5rem;
   }
 
   h1,
diff --git a/app/assets/stylesheets/common/software-update-prompt.scss b/app/assets/stylesheets/common/software-update-prompt.scss
index 6288bccebf2..91fa621a736 100644
--- a/app/assets/stylesheets/common/software-update-prompt.scss
+++ b/app/assets/stylesheets/common/software-update-prompt.scss
@@ -4,12 +4,6 @@
   right: 0;
   left: 0;
   top: var(--header-offset, 60px);
-
-  .static-login &,
-  .wizard &,
-  .invite-page & {
-    top: 0;
-  }
   background-color: var(--tertiary-low);
   max-height: 0;
   overflow: hidden;
@@ -17,6 +11,12 @@
   box-shadow: var(--shadow-header);
   z-index: z("header") - 10;
 
+  .static-login &,
+  .wizard &,
+  .invite-page & {
+    top: 0;
+  }
+
   .update-prompt-main-content {
     display: flex;
     align-items: center;
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 31006a4c354..8ead00be033 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -39,9 +39,6 @@
   }
 
   &.timeline-fullscreen {
-    @media (prefers-reduced-motion: no-preference) {
-      transition: max-height 0.3s ease-in;
-    }
     max-height: 0;
     position: fixed;
     margin-left: 0;
@@ -53,6 +50,11 @@
     box-shadow: var(--shadow-composer);
     padding: 20px 0;
     z-index: z("fullscreen");
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-height 0.3s ease-in;
+    }
+
     @media screen and (max-height: 425px) {
       padding-top: 10px;
     }
@@ -201,13 +203,14 @@
       // above the topic-footer-controls
       position: absolute;
       margin-top: 1em;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: opacity 0.2s ease-in;
-      }
       display: flex;
       gap: 0.5em;
       flex-wrap: wrap;
 
+      @media (prefers-reduced-motion: no-preference) {
+        transition: opacity 0.2s ease-in;
+      }
+
       button:last-child {
         margin-right: 0;
       }
@@ -292,13 +295,13 @@
     .timeline-last-read {
       position: absolute;
       margin-left: -0.35em;
+      z-index: z("base") + 2; // above timeline-handle
 
       .progress {
         font-size: 0.8em;
         color: var(--tertiary);
         margin-right: 1em;
       }
-      z-index: z("base") + 2; // above timeline-handle
     }
 
     .back-button {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index dd1a0db7e7e..f60c51162fa 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -339,18 +339,10 @@ a.toggle-preview {
   animation-delay: 1.5s;
   animation-direction: reverse;
   animation-fill-mode: forwards;
-  @media (prefers-reduced-motion) {
-    animation-duration: 0s;
-  }
   position: fixed;
   left: 50%;
   top: 10%;
   transform: translate(-50%, 0);
-
-  .rtl & {
-    // R2 is not smart enough to support this swap
-    transform: translate(50%, 0);
-  }
   z-index: z("header") + 1;
   background: var(--primary-very-high);
   color: var(--secondary);
@@ -358,6 +350,15 @@ a.toggle-preview {
   pointer-events: none;
   border-radius: 2px;
 
+  @media (prefers-reduced-motion) {
+    animation-duration: 0s;
+  }
+
+  .rtl & {
+    // R2 is not smart enough to support this swap
+    transform: translate(50%, 0);
+  }
+
   kbd {
     background: none;
   }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index dcb4d01c1f7..1afa1923f35 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -119,8 +119,8 @@ select {
   }
 
   .control-group {
-    @include clearfix;
     margin-bottom: 18px;
+    @include clearfix;
   }
 
   .control-indent {
@@ -162,10 +162,11 @@ body.has-sidebar-page {
   #main-outlet-wrapper {
     grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
     gap: 0 2em;
+    padding-left: 0;
+
     @include breakpoint(large) {
       gap: 0 1em;
     }
-    padding-left: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 5cf65301782..3bb7ed075b0 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -32,11 +32,11 @@ html.modal-open {
 .close {
   font-size: var(--font-up-3);
   text-decoration: none;
+  cursor: pointer;
 
   &:visited {
     color: var(--primary-high);
   }
-  cursor: pointer;
 
   &:hover {
     color: var(--primary);
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 9154007e2fb..390648639b0 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -103,11 +103,11 @@ nav.post-controls {
     align-items: center;
     margin-left: 0;
     border-radius: var(--d-button-border-radius);
+    white-space: nowrap;
 
     .topic-post & {
       margin-right: 0.5em;
     }
-    white-space: nowrap;
 
     .d-icon {
       margin-inline: var(--control-icon-space);
@@ -155,12 +155,13 @@ pre.codeblock-buttons:hover {
 }
 
 .embedded-posts {
+  border: 1px solid var(--primary-low);
+
   h1,
   h2,
   h3 {
     margin: 10px 0;
   }
-  border: 1px solid var(--primary-low);
 
   .topic-body {
     box-sizing: border-box;
@@ -341,15 +342,15 @@ pre.codeblock-buttons:hover {
   &.top {
     margin-left: 0;
     border: none;
+    width: calc(
+      var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+        var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px)
+    ); // 2px accounts for left and right borders
 
     .collapse-down {
       transform: translate(17%, 230%);
       z-index: 1;
     }
-    width: calc(
-      var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
-        var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px)
-    ); // 2px accounts for left and right borders
 
     .row {
       .topic-body,
diff --git a/app/assets/stylesheets/mobile/components/emoji-picker.scss b/app/assets/stylesheets/mobile/components/emoji-picker.scss
index 068e1d11f19..5fb89a27a18 100644
--- a/app/assets/stylesheets/mobile/components/emoji-picker.scss
+++ b/app/assets/stylesheets/mobile/components/emoji-picker.scss
@@ -4,20 +4,19 @@
   }
 
   html:not(.keyboard-visible.mobile-view) & .d-modal__container {
-    height: calc(var(--composer-vh, var(--1dvh)) * 100);
+    height: calc(var(--composer-vh, 1dvh) * 100);
     max-height: 100%;
 
     .emoji-picker__content {
       height: calc(
-        var(--composer-vh, var(--1dvh)) * 100 - 50px -
-          env(safe-area-inset-bottom)
+        var(--composer-vh, 1dvh) * 100 - 50px - env(safe-area-inset-bottom)
       );
     }
   }
 
   html.keyboard-visible.mobile-view & .d-modal__container {
     .emoji-picker__content {
-      height: calc(var(--composer-vh, var(--1dvh)) * 100 - 50px);
+      height: calc(var(--composer-vh, 1dvh) * 100 - 50px);
     }
   }
 
diff --git a/app/assets/stylesheets/mobile/modal-overrides.scss b/app/assets/stylesheets/mobile/modal-overrides.scss
index 86db75456c2..de281136c38 100644
--- a/app/assets/stylesheets/mobile/modal-overrides.scss
+++ b/app/assets/stylesheets/mobile/modal-overrides.scss
@@ -24,6 +24,6 @@
 .d-modal.grant-badge-modal,
 .d-modal.bookmark-reminder-modal {
   .d-modal__container {
-    min-height: calc(var(--composer-vh, var(--1dvh)) * 85);
+    min-height: calc(var(--composer-vh, 1dvh) * 85);
   }
 }
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index ad045477aba..9cc7e72a65f 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -7,14 +7,14 @@ html:has(.d-modal) {
 
 html.keyboard-visible.mobile-view {
   .d-modal {
-    max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
-    height: calc(var(--composer-vh, var(--1dvh)) * 100);
+    max-height: calc(var(--composer-vh, 1dvh) * 100);
+    height: calc(var(--composer-vh, 1dvh) * 100);
     bottom: 0;
   }
 
   .d-modal__container {
-    max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
-    height: calc(var(--composer-vh, var(--1dvh)) * 100);
+    max-height: calc(var(--composer-vh, 1dvh) * 100);
+    height: calc(var(--composer-vh, 1dvh) * 100);
   }
 }
 
@@ -32,7 +32,7 @@ html:not(.keyboard-visible.mobile-view) {
     position: fixed;
     width: 100%;
     max-width: 100%;
-    max-height: calc(var(--composer-vh, var(--1dvh)) * 85);
+    max-height: calc(var(--composer-vh, 1dvh) * 85);
   }
 
   &__footer {
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss
index 0abbf713121..b8840d7d986 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss
@@ -73,11 +73,6 @@
     align-self: stretch;
   }
 
-  --100dvh: 100vh;
-  @supports (height: 100dvh) {
-    --100dvh: 100dvh;
-  }
-
   &__input {
     overflow-x: hidden;
     width: 100%;
@@ -85,7 +80,7 @@
     outline: none;
     border: 0;
     resize: none;
-    max-height: calc(var(--100dvh) / 4);
+    max-height: 25dvh;
     background: none;
     padding: 0;
     margin: 5px 0;