From 8d104de41cc8cca386b1b58e29c78ac4de8ed432 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Tue, 21 May 2024 13:25:49 +0200
Subject: [PATCH] :bug: Fix scrollbar with on chrome after 121 release

---
 CHANGES.md                                                 | 6 ++++++
 frontend/resources/styles/common/base.scss                 | 7 +++++++
 frontend/resources/styles/common/refactor/basic-rules.scss | 4 ++++
 3 files changed, 17 insertions(+)

diff --git a/CHANGES.md b/CHANGES.md
index 70ca6e42cd..78f96ee260 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.0.3
+
+### :bug: Bugs fixed
+
+- Fix chrome scrollbar styling [Taiga Issue #7852](https://tree.taiga.io/project/penpot/issue/7852)
+
 ## 2.0.2
 
 ### :sparkles: Enhancements
diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index fd1e4ecb0f..8ca76c9cad 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -28,9 +28,16 @@ body {
 
 * {
   box-sizing: border-box;
+  scrollbar-width: thin;
   // transition: all .4s ease;
 }
 
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: auto;
+  }
+}
+
 .global-zeroclipboard-container {
   transition: none;
 
diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index c6141e4318..12c7961c87 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -6,10 +6,14 @@
 
 // SCROLLBAR
 .new-scrollbar {
+  scrollbar-width: thin;
   scrollbar-color: rgba(170, 181, 186, 0.3) transparent;
   &:hover {
     scrollbar-color: rgba(170, 181, 186, 0.7) transparent;
   }
+
+  // These rules do not apply in chrome - 121 or higher
+  //  We keep them to preserve backward compatibility.
   ::-webkit-scrollbar {
     background-color: transparent;
     cursor: pointer;