From 712d3c5205766144616b0eb2257e3c35dde408dc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 11:53:42 +0000
Subject: [PATCH 1/8] Add a very slight delay to bulk actions to prevent the
 floating bar width changing as the "duplicate" action is rendered

---
 resources/js/components/ui/Listing/BulkActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Listing/BulkActions.vue b/resources/js/components/ui/Listing/BulkActions.vue
index 63ef6e7f578..32824dc7690 100644
--- a/resources/js/components/ui/Listing/BulkActions.vue
+++ b/resources/js/components/ui/Listing/BulkActions.vue
@@ -49,7 +49,7 @@ function actionFailed(response) {
             class="fixed inset-x-0 bottom-1 sm:bottom-6 z-100 flex w-full max-w-[95vw] mx-auto justify-center "
             :initial="{ y: 100, opacity: 0 }"
             :animate="{ y: 0, opacity: 1 }"
-            :transition="{ duration: 0.2, ease: 'easeInOut' }"
+            :transition="{ duration: 0.2, delay: 0.075, ease: 'easeInOut' }"
         >
             <div class="[.nav-open_&]:translate-x-23 transition-transform duration-300 relative space-y-3 rounded-xl border border-gray-300/60 dark:border-gray-700 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
             <ButtonGroup>

From 7363e3a26bf935640af7f8007a99cd617e079865 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 12:10:19 +0000
Subject: [PATCH 2/8] When the listings are shorter than the viewport, position
 the floating toolbar at the bottom of the listings container

---
 resources/js/components/ui/Button/Group.vue   | 28 +++++++++++++++++++
 .../js/components/ui/Listing/Listing.vue      |  2 +-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index c8feb054a7b..972940126bf 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -36,4 +36,32 @@
             }
         }
     }
+
+    /* When the listings are shorter than the viewport, position the floating toolbar at the bottom of the listings container. */
+    @supports (anchor-name: --results) {
+        /* [1] Test whether the listings container is scrollable if listings are present. */
+        #main-content:has([data-listings-container]) {
+            container-type: scroll-state;
+
+            #content-card {
+                /* [2] If the listings container is relatively short (not scrollable), position the floating toolbar at the bottom of it. This is helpful for taller screens. The toolbar is more noticeable when it's not at the bottom of the viewport. */
+                @container not scroll-state(scrollable: y) {
+                    [data-floating-toolbar] {
+                        position: absolute;
+                        position-anchor: --results;
+                        top: 3rem;
+                        position-area: bottom;
+
+                        > * {
+                            translate: unset;
+                        }
+                    }
+                }
+            }
+        }
+
+        [data-listings-container] {
+            anchor-name: --results;
+        }
+    }
 </style>
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 9eb3655eee3..936e3cfbf66 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -729,7 +729,7 @@ autoApplyState();
             v-text="__('No results')"
         />
 
-        <Panel v-else class="relative overflow-x-auto overscroll-x-contain" style="container-type: scroll-state;">
+        <Panel v-else class="relative overflow-x-auto overscroll-x-contain" data-listings-container style="container-type: scroll-state;">
             <Table>
                 <template v-for="(slot, slotName) in forwardedTableCellSlots" :key="slotName" #[slotName]="slotProps">
                     <component :is="slot" v-bind="slotProps" />

From ff14c0e919dab69cf09540f1d3da6af5d6412d09 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 12:35:14 +0000
Subject: [PATCH 3/8] Remove transition from bulk actions since the motion
 element already handles and that and it erroneously animates when the
 scroll-state changes to scrollable, when the floating toolbar is shown

---
 resources/js/components/ui/Listing/BulkActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Listing/BulkActions.vue b/resources/js/components/ui/Listing/BulkActions.vue
index 32824dc7690..622ec2d7afb 100644
--- a/resources/js/components/ui/Listing/BulkActions.vue
+++ b/resources/js/components/ui/Listing/BulkActions.vue
@@ -51,7 +51,7 @@ function actionFailed(response) {
             :animate="{ y: 0, opacity: 1 }"
             :transition="{ duration: 0.2, delay: 0.075, ease: 'easeInOut' }"
         >
-            <div class="[.nav-open_&]:translate-x-23 transition-transform duration-300 relative space-y-3 rounded-xl border border-gray-300/60 dark:border-gray-700 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
+            <div class="[.nav-open_&]:translate-x-23 relative space-y-3 rounded-xl border border-gray-300/60 dark:border-gray-700 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
             <ButtonGroup>
                 <Button
                     class="text-blue-500!"

From ce11e1ca929b5e7cb05316d1458a895fdd527376 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 12:41:55 +0000
Subject: [PATCH 4/8] Add the data-listings-container helper to Assets too

---
 resources/js/components/assets/Browser/Browser.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 3e72c7671e8..c70d085714a 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -93,7 +93,7 @@
                             v-text="__('No results')"
                         />
 
-                        <Panel v-else :class="{ 'relative overflow-x-auto overscroll-x-contain': mode === 'table' }">
+                        <Panel v-else :class="{ 'relative overflow-x-auto overscroll-x-contain': mode === 'table' }" data-listings-container :style="mode === 'table' ? 'container-type: scroll-state;' : null">
                             <PanelHeader class="flex items-center justify-between px-1!">
                                 <Breadcrumbs
                                     v-if="!restrictFolderNavigation"

From 1025d56dd4678b2edb8cb778c1c6bdaadce6372d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 12:44:45 +0000
Subject: [PATCH 5/8] Tidy up comments

---
 resources/js/components/ui/Button/Group.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 972940126bf..87705a7f664 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -43,8 +43,13 @@
         #main-content:has([data-listings-container]) {
             container-type: scroll-state;
 
+            /* [2] Set up an anchor point for the floating toolbar. */
+            [data-listings-container] {
+                anchor-name: --results;
+            }
+
             #content-card {
-                /* [2] If the listings container is relatively short (not scrollable), position the floating toolbar at the bottom of it. This is helpful for taller screens. The toolbar is more noticeable when it's not at the bottom of the viewport. */
+                /* [/3] If the listings container is relatively short (not scrollable), position the floating toolbar at the bottom of it. This is helpful for taller screens. The toolbar is more noticeable when it's not at the bottom of the viewport. */
                 @container not scroll-state(scrollable: y) {
                     [data-floating-toolbar] {
                         position: absolute;
@@ -59,9 +64,5 @@
                 }
             }
         }
-
-        [data-listings-container] {
-            anchor-name: --results;
-        }
     }
 </style>

From e691315323150b2837b0b6c23818bdb2d4219991 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 12:46:37 +0000
Subject: [PATCH 6/8] Tidy up comments

---
 resources/js/components/ui/Button/Group.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 87705a7f664..ad0959c69d2 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -19,8 +19,9 @@
 </template>
 
 <style>
+    /* GROUP FLOATING TOOLBAR / BUTTON GROUP BORDERS
+    =================================================== */
     [data-ui-button-group] [data-ui-group-target] {
-
         @apply shadow-none;
 
         &:not(:first-child):not([data-floating-toolbar] &) {
@@ -37,6 +38,8 @@
         }
     }
 
+    /* GROUP FLOATING TOOLBAR / DYNAMIC POSITIONING
+    =================================================== */
     /* When the listings are shorter than the viewport, position the floating toolbar at the bottom of the listings container. */
     @supports (anchor-name: --results) {
         /* [1] Test whether the listings container is scrollable if listings are present. */

From 323c9b469d57b6b17e618f715d87b76f198fd925 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 14:22:30 +0000
Subject: [PATCH 7/8] A much much simpler solution I'm annoyed I didn't think
 about before

---
 resources/js/components/ui/Button/Group.vue   | 31 -------------------
 resources/js/components/ui/DocsCallout.vue    |  2 +-
 .../js/components/ui/Listing/BulkActions.vue  |  4 +--
 resources/js/components/ui/Panel/Panel.vue    |  2 +-
 4 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index ad0959c69d2..45679891c26 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -37,35 +37,4 @@
             }
         }
     }
-
-    /* GROUP FLOATING TOOLBAR / DYNAMIC POSITIONING
-    =================================================== */
-    /* When the listings are shorter than the viewport, position the floating toolbar at the bottom of the listings container. */
-    @supports (anchor-name: --results) {
-        /* [1] Test whether the listings container is scrollable if listings are present. */
-        #main-content:has([data-listings-container]) {
-            container-type: scroll-state;
-
-            /* [2] Set up an anchor point for the floating toolbar. */
-            [data-listings-container] {
-                anchor-name: --results;
-            }
-
-            #content-card {
-                /* [/3] If the listings container is relatively short (not scrollable), position the floating toolbar at the bottom of it. This is helpful for taller screens. The toolbar is more noticeable when it's not at the bottom of the viewport. */
-                @container not scroll-state(scrollable: y) {
-                    [data-floating-toolbar] {
-                        position: absolute;
-                        position-anchor: --results;
-                        top: 3rem;
-                        position-area: bottom;
-
-                        > * {
-                            translate: unset;
-                        }
-                    }
-                }
-            }
-        }
-    }
 </style>
diff --git a/resources/js/components/ui/DocsCallout.vue b/resources/js/components/ui/DocsCallout.vue
index 988b6300c6e..b9931260a5d 100644
--- a/resources/js/components/ui/DocsCallout.vue
+++ b/resources/js/components/ui/DocsCallout.vue
@@ -15,7 +15,7 @@ const url = computed(() => props.url.startsWith('http') ? props.url : `https://s
 
 <template>
 
-    <div v-if="linkToDocs" class="mt-12 mb-2 flex justify-center text-center starting-style-transition">
+    <div v-if="linkToDocs" class="mt-12 mb-10 flex justify-center text-center starting-style-transition">
         <CommandPaletteItem
             :text="[__('Statamic Documentation'), topic]"
             icon="book-next-page"
diff --git a/resources/js/components/ui/Listing/BulkActions.vue b/resources/js/components/ui/Listing/BulkActions.vue
index 622ec2d7afb..525a1b9f4ec 100644
--- a/resources/js/components/ui/Listing/BulkActions.vue
+++ b/resources/js/components/ui/Listing/BulkActions.vue
@@ -46,12 +46,12 @@ function actionFailed(response) {
             v-if="hasSelections"
             layout
             data-floating-toolbar
-            class="fixed inset-x-0 bottom-1 sm:bottom-6 z-100 flex w-full max-w-[95vw] mx-auto justify-center "
+            class="sticky inset-x-0 bottom-1 sm:bottom-6 z-100 flex w-full max-w-[95vw] mx-auto justify-center "
             :initial="{ y: 100, opacity: 0 }"
             :animate="{ y: 0, opacity: 1 }"
             :transition="{ duration: 0.2, delay: 0.075, ease: 'easeInOut' }"
         >
-            <div class="[.nav-open_&]:translate-x-23 relative space-y-3 rounded-xl border border-gray-300/60 dark:border-gray-700 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
+            <div class="space-y-3 rounded-xl border border-gray-300/60 dark:border-gray-700 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
             <ButtonGroup>
                 <Button
                     class="text-blue-500!"
diff --git a/resources/js/components/ui/Panel/Panel.vue b/resources/js/components/ui/Panel/Panel.vue
index 17b3baf2aaa..538ea2a7afe 100644
--- a/resources/js/components/ui/Panel/Panel.vue
+++ b/resources/js/components/ui/Panel/Panel.vue
@@ -15,7 +15,7 @@ const props = defineProps({
     <div
         :class="[
             '@container/panel relative bg-gray-150 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950/35 dark:inset-shadow-2xs dark:inset-shadow-black',
-            'w-full rounded-2xl mb-5 max-[600px]:p-1.25 p-1.75 [&:has(>[data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
+            'w-full rounded-2xl mb-10 max-[600px]:p-1.25 p-1.75 [&:has(>[data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
         ]"
         data-ui-panel
     >

From 5126bd4f2899d17880038fa361817a6262cb09ac Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 19 Jan 2026 14:24:38 +0000
Subject: [PATCH 8/8] Remove unnecessary data attributes

---
 resources/js/components/assets/Browser/Browser.vue | 2 +-
 resources/js/components/ui/Listing/Listing.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index c70d085714a..3e72c7671e8 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -93,7 +93,7 @@
                             v-text="__('No results')"
                         />
 
-                        <Panel v-else :class="{ 'relative overflow-x-auto overscroll-x-contain': mode === 'table' }" data-listings-container :style="mode === 'table' ? 'container-type: scroll-state;' : null">
+                        <Panel v-else :class="{ 'relative overflow-x-auto overscroll-x-contain': mode === 'table' }">
                             <PanelHeader class="flex items-center justify-between px-1!">
                                 <Breadcrumbs
                                     v-if="!restrictFolderNavigation"
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 936e3cfbf66..9eb3655eee3 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -729,7 +729,7 @@ autoApplyState();
             v-text="__('No results')"
         />
 
-        <Panel v-else class="relative overflow-x-auto overscroll-x-contain" data-listings-container style="container-type: scroll-state;">
+        <Panel v-else class="relative overflow-x-auto overscroll-x-contain" style="container-type: scroll-state;">
             <Table>
                 <template v-for="(slot, slotName) in forwardedTableCellSlots" :key="slotName" #[slotName]="slotProps">
                     <component :is="slot" v-bind="slotProps" />