From: Ajay Bura <ajbura@gmail.com>
Date: Sat, 15 Jan 2022 14:41:37 +0000 (+0530)
Subject: Add padding in scroll view for safari
X-Git-Tag: v1.7.0~24
X-Git-Url: https://git.wafflesoft.org/?a=commitdiff_plain;h=62c9e271d81a3d885cb39e0d71d14dac33e5b78e;p=rainny.git

Add padding in scroll view for safari

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---

diff --git a/src/app/atoms/scroll/_scrollbar.scss b/src/app/atoms/scroll/_scrollbar.scss
index 6dc5b46..11c2dc8 100644
--- a/src/app/atoms/scroll/_scrollbar.scss
+++ b/src/app/atoms/scroll/_scrollbar.scss
@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .firefox-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: var(--bg-surface-hover) transparent;
@@ -30,6 +32,12 @@
   }
 }
 
+@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
@@ -38,6 +46,7 @@
   @extend .webkit-scrollbar;
   @extend .webkit-scrollbar-track;
   @extend .webkit-scrollbar-thumb;
+  @include paddingForSafari(var(--sp-extra-tight));
 }
 
 @mixin scroll__h {
@@ -58,6 +67,8 @@
 @mixin scroll--invisible {
   -ms-overflow-style: none;
   scrollbar-width: none;
+  @include paddingForSafari(0);
+
   &::-webkit-scrollbar {
     display: none;
   }