From 7d4b602cb28675da01df6ae27faacff8d70c1711 Mon Sep 17 00:00:00 2001
From: Michael Stanclift <mx@vmstan.com>
Date: Tue, 13 Aug 2024 16:54:03 -0500
Subject: [PATCH] Fix collapsable column borders in Safari and improve Safari
 scrollbars (#31389)

---
 .../styles/mastodon/components.scss           | 15 +++++----
 app/javascript/styles/mastodon/reset.scss     | 31 ++++---------------
 2 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 6ef498c79b..b049635d16 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4503,10 +4503,19 @@ a.status-card {
   opacity: 1;
   z-index: 1;
   position: relative;
+  border-left: 1px solid var(--background-border-color);
+  border-right: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-left: 0;
+    border-right: 0;
+  }
 
   &.collapsed {
     max-height: 0;
     opacity: 0.5;
+    border-bottom: 0;
   }
 
   &.animating {
@@ -4523,13 +4532,7 @@ a.status-card {
 }
 
 .column-header__collapsible-inner {
-  border: 1px solid var(--background-border-color);
   border-top: 0;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-left: 0;
-    border-right: 0;
-  }
 }
 
 .column-header__setting-btn {
diff --git a/app/javascript/styles/mastodon/reset.scss b/app/javascript/styles/mastodon/reset.scss
index f54ed5bc79..f8a4a08ced 100644
--- a/app/javascript/styles/mastodon/reset.scss
+++ b/app/javascript/styles/mastodon/reset.scss
@@ -54,40 +54,21 @@ table {
 }
 
 html {
-  scrollbar-color: lighten($ui-base-color, 4%) rgba($base-overlay-background, 0.1);
+  scrollbar-color: var(--background-border-color);
 }
 
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+  width: 4px;
+  height: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: lighten($ui-base-color, 4%);
-  border: 0px none $base-border-color;
-  border-radius: 50px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: lighten($ui-base-color, 6%);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: lighten($ui-base-color, 4%);
+  background-color: $ui-highlight-color;
+  opacity: .25;
 }
 
 ::-webkit-scrollbar-track {
-  border: 0px none $base-border-color;
-  border-radius: 0;
-  background: rgba($base-overlay-background, 0.1);
-}
-
-::-webkit-scrollbar-track:hover {
-  background: $ui-base-color;
-}
-
-::-webkit-scrollbar-track:active {
-  background: $ui-base-color;
+  background-color: var(--background-border-color);
 }
 
 ::-webkit-scrollbar-corner {