Finish filter polish

Author: jaygeorge

resources/css/core/utilities.css

@@ -132,7 +132,7 @@
 */
 /* HTML Example...
 
-    <div class="absolute right-0 mask-bg"> <-- needs to be position:absolute or position:relative
+    <div class="absolute right-0 mask-bg"> <-- needs to be position:absolute or position:relative. Use a modifier class to change the amount/direction, e.g. <div class="sticky left-0 mask-bg mask-bg--left mask-bg--left-small">
 
     </div>
 
@@ -148,15 +148,24 @@
         z-index: var(--z-index-below);
         width: calc(150% + var(--cover));
         height: calc(100% + var(--height-offset) * 2);
-        left: calc(0.5rem - var(--cover));
         top: calc(0% - var(--height-offset));
-        background: radial-gradient(circle at center, hsl(0deg 0% 100%) 0%,transparent 80%);
+        background: radial-gradient(circle at center, white 0%,transparent 80%);
         border-radius: 1.5rem 0 0 1.5rem;
     }
     .dark &::before {
         background: radial-gradient(circle at center, hsl(240deg 6% 10%) 0%, transparent 80%);
     }
 }
+@utility mask-bg--left {
+    &::before {
+        left: calc(0.5rem - var(--cover));
+    }
+}
+@utility mask-bg--left-small {
+    &::before {
+        left: calc(-0.75rem - var(--cover));
+    }
+}
 
 /* UTILITIES / STATES / DECORATION / ARCHIECTURAL LINES
 =================================================== */

resources/js/components/ui/Listing/CustomizeColumns.vue

@@ -69,7 +69,7 @@ function reset() {
 </script>
 
 <template>
-    <div data-ui-column-customizer class="absolute right-0 mask-bg">
+    <div data-ui-column-customizer class="absolute right-0 mask-bg mask-bg--left">
         <Tooltip :text="__('Customize Columns')">
             <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" />
         </Tooltip>

resources/js/components/ui/Listing/Filters.vue

@@ -37,7 +37,7 @@ function removeFieldFilter(handle) {
     <div class="flex flex-1 items-center gap-3 overflow-x-auto py-3 rounded-r-4xl">
         <Modal :title="__('Apply Filters')">
             <template #trigger>
-                <div class="sticky left-0 bg-white dark:bg-gray-900">
+                <div class="sticky left-0 rounded-r-lg bg-white dark:bg-gray-900 mask-bg mask-bg--left mask-bg--left-small">
                     <Button icon="sliders-horizontal" class="[&_svg]:size-3.5" :disabled="reorderable">
                         {{ __('Filters') }}
                         <Badge