From 863afaf44b696d8b20916bdb749a52ead3fcc8fc Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Mon, 12 Feb 2024 23:50:21 +0300
Subject: [PATCH] feat: use CSS scrollbar-gutter for drawer. close #2622, close
 #2483, close #2782, close #2142

---
 src/components/styled/drawer.css   |  1 -
 src/components/unstyled/drawer.css |  4 ++--
 src/utilities/unstyled/drawer.css  | 32 +++++++++++++++++++++---------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/styled/drawer.css b/src/components/styled/drawer.css
index 72a7814a262..93e87e41d7c 100644
--- a/src/components/styled/drawer.css
+++ b/src/components/styled/drawer.css
@@ -1,7 +1,6 @@
 .drawer {
   width: 100%;
   &-side {
-    @apply overflow-x-hidden;
     & > .drawer-overlay {
       @apply cursor-pointer bg-transparent transition-colors duration-200 ease-out;
     }
diff --git a/src/components/unstyled/drawer.css b/src/components/unstyled/drawer.css
index aefc0516f8c..9b5716c3837 100644
--- a/src/components/unstyled/drawer.css
+++ b/src/components/unstyled/drawer.css
@@ -5,7 +5,7 @@
     @apply col-start-2 row-start-1 min-w-0;
   }
   &-side {
-    @apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-y-auto overscroll-contain;
+    @apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-x-hidden overflow-y-hidden overscroll-contain;
     height: 100vh;
     height: 100dvh;
     & > .drawer-overlay {
@@ -26,7 +26,7 @@
     @apply fixed h-0 w-0 appearance-none opacity-0;
     &:checked {
       & ~ .drawer-side {
-        @apply pointer-events-auto visible;
+        @apply pointer-events-auto visible overflow-y-auto;
         & > *:not(.drawer-overlay) {
           transform: translateX(0%);
         }
diff --git a/src/utilities/unstyled/drawer.css b/src/utilities/unstyled/drawer.css
index ba1f55ee7f6..85ee4cf5829 100644
--- a/src/utilities/unstyled/drawer.css
+++ b/src/utilities/unstyled/drawer.css
@@ -1,15 +1,29 @@
-.drawer-open > .drawer-toggle {
-  @apply hidden;
-  & ~ .drawer-side {
-    @apply pointer-events-auto visible sticky block w-auto overscroll-auto;
-    & > *:not(.drawer-overlay) {
-      transform: translateX(0%);
-      [dir="rtl"] & {
+.drawer-open {
+  & > .drawer-toggle {
+    @apply hidden;
+    & ~ .drawer-side {
+      @apply pointer-events-auto visible sticky block w-auto overscroll-auto;
+      & > *:not(.drawer-overlay) {
         transform: translateX(0%);
+        [dir="rtl"] & {
+          transform: translateX(0%);
+        }
       }
     }
+    &:checked ~ .drawer-side {
+      @apply pointer-events-auto visible;
+    }
   }
-  &:checked ~ .drawer-side {
-    @apply pointer-events-auto visible;
+  & > .drawer-side {
+    @apply overflow-y-auto;
   }
 }
+/* these two should have the same specificity */
+html:has(.drawer-toggle:checked) {
+  @apply overflow-y-hidden;
+  scrollbar-gutter: stable;
+}
+html:has(.drawer-open.drawer-open) {
+  @apply overflow-y-auto;
+  scrollbar-gutter: auto;
+}