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

Author: xiCO2k

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');
+    }
+}

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>

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')