From 268275cee1919dad84b21d33227ee1f2e5f5803b Mon Sep 17 00:00:00 2001
From: Anya Wallace <anya.wallace@alleninstitute.org>
Date: Wed, 6 Nov 2024 16:14:19 -0800
Subject: [PATCH 1/2] Fix scrollbar for Safari and Chromium

---
 packages/core/styles/global.css | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/core/styles/global.css b/packages/core/styles/global.css
index 5b304a21..7161ea79 100644
--- a/packages/core/styles/global.css
+++ b/packages/core/styles/global.css
@@ -20,8 +20,30 @@ main {
     padding: 0;
     border: 0;
     overflow: hidden;
-    /* Unavailable on some versions of some browsers */
-    scrollbar-color:  var(--medium-grey) var(--accent-dark);
+}
+
+/* For browsers that support `scrollbar-*` properties */
+@supports (scrollbar-color: auto) {
+    html,
+    body,
+    main {
+        scrollbar-color: var(--medium-grey) var(--accent-dark);
+    }
+}
+/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+@supports selector(::-webkit-scrollbar) {
+    body *::-webkit-scrollbar {
+        background-color: var(--accent-dark);
+        width: 12px;
+        height: 12px;
+    }
+    body *::-webkit-scrollbar-corner {
+        background-color: var(--accent-dark);
+    }
+    body *::-webkit-scrollbar-thumb {
+        background-color: var(--medium-grey);
+        border-radius: 8px
+    }
 }
 
 body {

From 4a3e66aeb35263aae74dad9d90f812fbcebd57b0 Mon Sep 17 00:00:00 2001
From: Anya Wallace <anya.wallace@alleninstitute.org>
Date: Thu, 7 Nov 2024 10:41:46 -0800
Subject: [PATCH 2/2] Add browsers to comment

---
 packages/core/styles/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/styles/global.css b/packages/core/styles/global.css
index 7161ea79..447c7d5d 100644
--- a/packages/core/styles/global.css
+++ b/packages/core/styles/global.css
@@ -22,7 +22,7 @@ main {
     overflow: hidden;
 }
 
-/* For browsers that support `scrollbar-*` properties */
+/* For browsers that support `scrollbar-*` properties (updated versions of Firefox, Chrome, Edge) */
 @supports (scrollbar-color: auto) {
     html,
     body,
@@ -30,7 +30,7 @@ main {
         scrollbar-color: var(--medium-grey) var(--accent-dark);
     }
 }
-/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+/* Otherwise, use pseudo-elements (Safari, Chromium) */
 @supports selector(::-webkit-scrollbar) {
     body *::-webkit-scrollbar {
         background-color: var(--accent-dark);