removes the padding right when there is no scroll active. (#369)

laravel · May 9, 2024 · 5ea0340 · 5ea0340
1 parent 7190f4a
commit 5ea0340
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/resources/css/pulse.css b/resources/css/pulse.css
@@ -5,3 +5,16 @@
 [x-cloak] {
     display: none;
 }
+
+@keyframes detect-scroll {
+  from, to { --can-scroll: ; }
+}
+
+@supports selector(::-webkit-scrollbar) {
+    .supports-scrollbars {
+        animation: detect-scroll linear;
+        animation-timeline: scroll(self);
+
+        padding-right: var(--can-scroll) theme('spacing.3');
+    }
+}
diff --git a/resources/views/components/scroll.blade.php b/resources/views/components/scroll.blade.php
@@ -22,7 +22,7 @@
     }"
     {{ $attributes->merge(['class' => '@container/scroll-wrapper flex-grow flex w-full overflow-hidden' . ($expand ? '' : ' basis-56'), ':class' => "loading && 'opacity-25 animate-pulse'"]) }}
 >
-    <div x-ref="content" class="flex-grow basis-full overflow-y-auto scrollbar:w-1.5 scrollbar:h-1.5 scrollbar:bg-transparent scrollbar-track:bg-gray-100 scrollbar-thumb:rounded scrollbar-thumb:bg-gray-300 scrollbar-track:rounded dark:scrollbar-track:bg-gray-500/10 dark:scrollbar-thumb:bg-gray-500/50 supports-scrollbars:pr-3" @scroll.debounce.5ms="scroll">
+    <div x-ref="content" class="flex-grow basis-full overflow-y-auto scrollbar:w-1.5 scrollbar:h-1.5 scrollbar:bg-transparent scrollbar-track:bg-gray-100 scrollbar-thumb:rounded scrollbar-thumb:bg-gray-300 scrollbar-track:rounded dark:scrollbar-track:bg-gray-500/10 dark:scrollbar-thumb:bg-gray-500/50 supports-scrollbars" @scroll.debounce.5ms="scroll">
         {{ $slot }}
         <div x-ref="fade" class="h-6 origin-bottom fixed bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 pointer-events-none" wire:ignore></div>
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -33,7 +33,6 @@ module.exports = {
         require("@tailwindcss/container-queries"),
         function ({ addVariant }) {
             addVariant('default', 'html :where(&)')
-            addVariant('supports-scrollbars', '@supports selector(::-webkit-scrollbar)'),
             addVariant('scrollbar', '&::-webkit-scrollbar')
             addVariant('scrollbar-track', '&::-webkit-scrollbar-track')
             addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb')