From 80110d1a4843564be5674c5e44f3dd0a75672d42 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 24 Jan 2022 14:56:36 +0530
Subject: [PATCH] Fix scrollbar padding for safari breaks other component
 styling

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/atoms/scroll/ScrollView.scss |  9 +++++++++
 src/app/atoms/scroll/_scrollbar.scss | 10 ----------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/atoms/scroll/ScrollView.scss b/src/app/atoms/scroll/ScrollView.scss
index 6c7d709..251037e 100644
--- a/src/app/atoms/scroll/ScrollView.scss
+++ b/src/app/atoms/scroll/ScrollView.scss
@@ -1,9 +1,17 @@
+@use '../../partials/dir';
 @use '_scrollbar';
 
+@mixin paddingForSafari($padding) {
+	@media not all and (min-resolution:.001dpcm) {
+    @include dir.side(padding, 0, $padding);
+  }
+}
+
 .scrollbar {
   width: 100%;
   height: 100%;
   @include scrollbar.scroll;
+  @include paddingForSafari(var(--sp-extra-tight));
 
   &__h {
     @include scrollbar.scroll__h;
@@ -18,5 +26,6 @@
   }
   &--invisible {
     @include scrollbar.scroll--invisible;
+    @include paddingForSafari(0);
   }
 }
\ No newline at end of file
diff --git a/src/app/atoms/scroll/_scrollbar.scss b/src/app/atoms/scroll/_scrollbar.scss
index 11c2dc8..78ec75a 100644
--- a/src/app/atoms/scroll/_scrollbar.scss
+++ b/src/app/atoms/scroll/_scrollbar.scss
@@ -1,5 +1,3 @@
-@use '../../partials/dir';
-
 .firefox-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: var(--bg-surface-hover) transparent;
@@ -32,12 +30,6 @@
   }
 }
 
-@mixin paddingForSafari($padding) {
-	@media not all and (min-resolution:.001dpcm) {
-    @include dir.side(padding, 0, $padding);
-  }
-}
-
 @mixin scroll {
   overflow: hidden;
   // Below code stop scroll when x-scrollable content come in timeline
@@ -46,7 +38,6 @@
   @extend .webkit-scrollbar;
   @extend .webkit-scrollbar-track;
   @extend .webkit-scrollbar-thumb;
-  @include paddingForSafari(var(--sp-extra-tight));
 }
 
 @mixin scroll__h {
@@ -67,7 +58,6 @@
 @mixin scroll--invisible {
   -ms-overflow-style: none;
   scrollbar-width: none;
-  @include paddingForSafari(0);
 
   &::-webkit-scrollbar {
     display: none;