From 2f82baca99b0cc68f59269acc0f49026cb363c36 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 9 Jan 2026 15:09:47 +0000
Subject: [PATCH 1/4] Hide the dot menu until hovered

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

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index a110de652b..cfdc4db316 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -129,7 +129,7 @@
                                         </div>
                                     </div>
                                 </button>
-                                <div class="absolute end-2 top-1">
+                                <div class="absolute end-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                     <Dropdown placement="left-start">
                                         <DropdownMenu>
                                             <DropdownItem

From 6f44a19f2bc531718ccbd3bc591aea1a93e98953 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 9 Jan 2026 15:43:20 +0000
Subject: [PATCH 2/4] Make asset grid dot menus opaque

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

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index cfdc4db316..0b5607e7e6 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -129,7 +129,7 @@
                                         </div>
                                     </div>
                                 </button>
-                                <div class="absolute end-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <div class="absolute end-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity [&_button]:bg-white [&_button]:hover:bg-white [&_button]:dark:bg-gray-900 [&_button]:dark:hover:bg-gray-900">
                                     <Dropdown placement="left-start">
                                         <DropdownMenu>
                                             <DropdownItem

From 95f9bdbe7b3e3a3f26e1e7d26e08cd73a386753b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 12 Jan 2026 19:46:09 +0000
Subject: [PATCH 3/4] Make the dots accessible to focus

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

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 0b5607e7e6..35625966ac 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -129,7 +129,7 @@
                                         </div>
                                     </div>
                                 </button>
-                                <div class="absolute end-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity [&_button]:bg-white [&_button]:hover:bg-white [&_button]:dark:bg-gray-900 [&_button]:dark:hover:bg-gray-900">
+                                <div class="absolute end-1 top-1 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity [&_button]:bg-white [&_button]:hover:bg-white [&_button]:dark:bg-gray-900 [&_button]:dark:hover:bg-gray-900">
                                     <Dropdown placement="left-start">
                                         <DropdownMenu>
                                             <DropdownItem

From 76381210ae6651639de2002816433dec121754f1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 12 Jan 2026 19:46:25 +0000
Subject: [PATCH 4/4] Add button to focus states to override webkit's focus
 ring

---
 resources/css/elements/base.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index b1c6a7c7e4..dd37951142 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -32,6 +32,7 @@
 @layer base {
     /* Explicitly show focus without needing to tab */
     .show-focus:focus,
+    button,
     /* Explicitly show focus without needing to tab for buttons inside modals, e.g. Assets > cancel button on delete modal */
     [data-dismissable-layer] button:focus,
     /* and then a global selector for focus-visible everywhere else (except where the focus-within class will handle the focus outline target instead). Use a direct descendant here so we don't affect things like the focus state of Bard field > Replicator > then another Bard field. */
@@ -70,7 +71,7 @@
     }
 
     /* Notes...
-    
+
         - Sometimes we want to show a focus outline on a container when it has focus-within, e.g. in Replicator sets where we want to show a focus outline on the set header when it has focus on the button inside the header, whose shape is not as neat.
 
         - Here we set a specific target for the focus outline