feat: use CSS scrollbar-gutter for drawer. close #2622, close #2483, c…

…lose #2782, close #2142
saadeghi · Feb 12, 2024 · 863afaf · Vladastos · Feb 22, 2024 · 863afaf
1 parent a795f48
commit 863afaf
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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;
+}