From 20619d0381ab58386cdb1699432134f6487901f2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 12:51:25 +0100
Subject: [PATCH] Change how the slot with the "customize columns" works.
 Instead of an absolutely positioned element it now fits within the parent
 layout

---
 resources/js/components/ui/Listing/CustomizeColumns.vue | 2 +-
 resources/js/components/ui/Listing/Filters.vue          | 9 ++++-----
 resources/js/components/ui/Listing/Listing.vue          | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/ui/Listing/CustomizeColumns.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
index 02cc0d53981..74a17db774f 100644
--- a/resources/js/components/ui/Listing/CustomizeColumns.vue
+++ b/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 mask-bg--left">
+    <div data-ui-column-customizer>
         <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" v-tooltip="__('Customize Columns')" />
         <Modal :title="__('Customize Columns')" v-model:open="open">
             <div class="border rounded-lg dark:border-gray-700">
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 9b047f3f4fc..5b6a15edc2a 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -131,9 +131,8 @@ function handleStackClosed() {
 </script>
 
 <template>
-    <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto py-3 rounded-r-4xl">
-
-        <div ref="filtersButtonWrapperRef" class="sticky left-0 ps-[1px] rounded-r-lg mask-bg mask-bg--left mask-bg--left-small">
+    <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto py-3 st-mask-horizontal-overflow">
+        <div ref="filtersButtonWrapperRef" class="sticky left-0 rounded-r-lg mask-bg mask-bg--left mask-bg--left-small">
             <Button icon="sliders-horizontal" class="[&_svg]:size-3.5" :disabled="reorderable" @click="open = true">
                 {{ __('Filters') }}
                 <Badge
@@ -198,7 +197,7 @@ function handleStackClosed() {
             variant="filled"
             v-for="({ filter, handle, badge }, index) in fieldFilterBadges"
             :key="`${filter}-${handle}`"
-            class="cursor-default ps-4 gap-1 text-gray-900 dark:text-gray-200 last:me-12 hover:bg-gray-950/5 dark:hover:bg-white/4"
+            class="cursor-default ps-4 gap-1 text-gray-900 dark:text-gray-200 hover:bg-gray-950/5 dark:hover:bg-white/4"
             :class="reorderable ? 'pe-4 text-gray-400 dark:text-gray-600' : 'pe-2'"
         >
             <span class="whitespace-nowrap" v-text="getFieldFilterBadgeLabel(handle, badge)" />
@@ -220,7 +219,7 @@ function handleStackClosed() {
             variant="filled"
             v-for="(badge, handle, index) in standardBadges"
             :key="handle"
-            class="cursor-default ps-4 gap-1 text-gray-900 dark:text-gray-200 last:me-12 hover:bg-gray-950/5 dark:hover:bg-white/4"
+            class="cursor-default ps-4 gap-1 text-gray-900 dark:text-gray-200 hover:bg-gray-950/5 dark:hover:bg-white/4"
             :class="reorderable ? 'pe-4 text-gray-400 dark:text-gray-600' : 'pe-2'"
         >
             <span class="whitespace-nowrap">{{ badge }}</span>
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 446212cc55f..0110f982577 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -730,7 +730,7 @@ autoApplyState();
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
             <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
-                <div class="flex flex-1 items-center gap-2 sm:gap-3 w-full">
+                <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>