From 80d70751716d1d8b5c52308a28dbfb52949c94b8 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 3 Feb 2025 18:14:11 +0100
Subject: [PATCH] UX: Fix user-select regressions (#31129)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…and cases that didn't take webkit into account at all.
---
 app/assets/stylesheets/common/base/modal.scss         |  4 ++--
 app/assets/stylesheets/common/base/topic-post.scss    |  2 +-
 app/assets/stylesheets/common/foundation/mixins.scss  |  1 +
 .../common/table-builder/table-edit-decorator.scss    |  2 +-
 app/assets/stylesheets/wizard.scss                    |  2 +-
 .../chat/assets/stylesheets/mixins/chat-reaction.scss |  2 +-
 plugins/footnote/assets/stylesheets/footnotes.scss    |  2 +-
 stylelint.config.mjs                                  | 11 ++++++++++-
 8 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 55f641e1a50..aedd20aa780 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -123,7 +123,7 @@
   }
 
   &__backdrop {
-    user-select: none;
+    @include user-select(none);
     position: fixed;
     top: 0;
     right: 0;
@@ -150,7 +150,7 @@
 }
 
 .modal-backdrop {
-  user-select: none;
+  @include user-select(none);
   position: fixed;
   top: 0;
   right: 0;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 0d98360d06c..4b7e14caf71 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1285,7 +1285,7 @@ a.mention-group {
   @include mention;
 
   .user-status-message {
-    user-select: none;
+    @include user-select(none);
   }
 }
 
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index ecc5185e84a..5c3675559ea 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -124,6 +124,7 @@ $hpad: 0.65em;
 // Unselectable (avoids unwanted selections with iPad, touch laptops, etc)
 
 @mixin user-select($mode) {
+  -webkit-user-select: $mode;
   user-select: $mode;
 }
 
diff --git a/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss b/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
index 2b2c7e49f51..251b503bb98 100644
--- a/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
+++ b/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
@@ -1,6 +1,6 @@
 .btn-edit-table {
   -webkit-touch-callout: none;
-  user-select: none;
+  @include user-select(none);
 }
 
 .fullscreen-table-wrapper:hover .fullscreen-table-wrapper__buttons button {
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index d9b687fe7cd..7a1bdeb85a2 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -253,7 +253,7 @@ body.wizard {
     background: var(--secondary);
     border-radius: 10px;
     cursor: grab;
-    user-select: none;
+    @include user-select(none);
 
     &.dragging {
       cursor: grabbing;
diff --git a/plugins/chat/assets/stylesheets/mixins/chat-reaction.scss b/plugins/chat/assets/stylesheets/mixins/chat-reaction.scss
index 4d8a75543c8..9162faa3ff5 100644
--- a/plugins/chat/assets/stylesheets/mixins/chat-reaction.scss
+++ b/plugins/chat/assets/stylesheets/mixins/chat-reaction.scss
@@ -8,7 +8,7 @@
   border: 1px solid var(--primary-300);
   background: transparent;
   cursor: pointer;
-  user-select: none;
+  @include user-select(none);
   transition: background 0.2s, border-color 0.2s;
 
   &.reacted {
diff --git a/plugins/footnote/assets/stylesheets/footnotes.scss b/plugins/footnote/assets/stylesheets/footnotes.scss
index e208dccc98d..230424c2ff5 100644
--- a/plugins/footnote/assets/stylesheets/footnotes.scss
+++ b/plugins/footnote/assets/stylesheets/footnotes.scss
@@ -1,6 +1,6 @@
 .inline-footnotes {
   a.expand-footnote {
-    user-select: none;
+    @include user-select(none);
     padding: 0 0.5em;
     margin: 0 0 0 0.25em;
     color: var(--primary-low-mid-or-secondary-high);
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
index 1a6a94c5e54..62f9aefe11a 100644
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -11,7 +11,10 @@ export default {
     "no-invalid-double-slash-comments": true,
     "no-empty-source": true,
     "at-rule-empty-line-before": null,
-    "rule-empty-line-before": ["always", {except: ["after-single-line-comment", "first-nested"]}],
+    "rule-empty-line-before": [
+      "always",
+      { except: ["after-single-line-comment", "first-nested"] },
+    ],
     "selector-class-pattern": null,
     "custom-property-pattern": null,
     "declaration-empty-line-before": "never",
@@ -40,5 +43,11 @@ export default {
     "function-linear-gradient-no-nonstandard-direction": null,
     "scss/at-mixin-pattern": null,
     "media-feature-range-notation": "prefix",
+    "property-no-vendor-prefix": [
+      true,
+      {
+        ignoreProperties: ["user-select"],
+      },
+    ],
   },
 };