From 1d2230111ffd23057aa1f59e614db48ac289c785 Mon Sep 17 00:00:00 2001
From: kjetilhole <kjetilhole07@gmail.com>
Date: Thu, 8 Jan 2026 21:50:28 +0100
Subject: [PATCH 1/9] Adds "set alt" button in assets grid view

---
 .../components/fieldtypes/assets/AssetTile.vue   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 59d6f412d8b..4a798df30fa 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -18,7 +18,7 @@
         >
         </asset-editor>
 
-        <div class="flex h-full border-b dark:border-gray-700 rounded-b-md relative" :class="{ 'bg-checkerboard rounded-md': canBeTransparent }">
+        <div class="flex h-full border-b dark:border-gray-700 rounded-b-md relative" :class="{ 'rounded-md': canBeTransparent }">
             <div class="p-1 flex flex-col items-center justify-center h-full">
                 <!-- Solo Bard -->
                 <template v-if="isImage && isInBardField && !isInAssetBrowser">
@@ -36,11 +36,11 @@
                 </template>
 
             </div>
-            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 duration-100">
+            <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 hover:opacity-100 duration-100 gap-2">
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
-                        <ui-button size="sm" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
-                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" />
+                        <ui-button size="xs" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
+                        <ui-button size="xs" @click="remove" icon="x" aria-label="__('Remove')" />
                     </template>
 
                     <template v-else>
@@ -48,6 +48,14 @@
                         <ui-button icon="download" size="sm" v-if="asset.isViewable" @click="download" :aria-label="__('Download file')" />
                     </template>
                 </div>
+
+                <ui-badge
+                    v-if="!readOnly && showSetAlt && needsAlt"
+                    as="button"
+                    color="sky"
+                    :text="__('Set Alt')"
+                    @click="editOrOpen"
+                />
             </div>
         </div>
 

From 919bec609ebb901d634eedd4af1d6e740072c33e Mon Sep 17 00:00:00 2001
From: kjetilhole <kjetilhole07@gmail.com>
Date: Fri, 9 Jan 2026 09:07:48 +0100
Subject: [PATCH 2/9] Re-add checkerboard background and make alt button show
 even if alt text is set

---
 resources/js/components/fieldtypes/assets/AssetTile.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 4a798df30fa..9fee0a5f33a 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -18,7 +18,7 @@
         >
         </asset-editor>
 
-        <div class="flex h-full border-b dark:border-gray-700 rounded-b-md relative" :class="{ 'rounded-md': canBeTransparent }">
+        <div class="flex h-full border-b dark:border-gray-700 rounded-b-md relative" :class="{ 'bg-checkerboard rounded-md': canBeTransparent }">
             <div class="p-1 flex flex-col items-center justify-center h-full">
                 <!-- Solo Bard -->
                 <template v-if="isImage && isInBardField && !isInAssetBrowser">
@@ -50,7 +50,7 @@
                 </div>
 
                 <ui-badge
-                    v-if="!readOnly && showSetAlt && needsAlt"
+                    v-if="!readOnly && showSetAlt"
                     as="button"
                     color="sky"
                     :text="__('Set Alt')"

From ad7b202670c4451a62a6a0ed57f1e5375b93f805 Mon Sep 17 00:00:00 2001
From: kjetilhole <kjetilhole07@gmail.com>
Date: Fri, 9 Jan 2026 15:29:24 +0100
Subject: [PATCH 3/9] Adjust button based on if filename is shown or not

---
 resources/js/components/fieldtypes/assets/AssetTile.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 9fee0a5f33a..ef0b2315725 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -39,8 +39,8 @@
             <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 hover:opacity-100 duration-100 gap-2">
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
-                        <ui-button size="xs" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
-                        <ui-button size="xs" @click="remove" icon="x" aria-label="__('Remove')" />
+                        <ui-button :size="showFilename ? 'sm' : 'xs'" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
+                        <ui-button :size="showFilename ? 'sm' : 'xs'" @click="remove" icon="x" aria-label="__('Remove')" />
                     </template>
 
                     <template v-else>
@@ -50,7 +50,7 @@
                 </div>
 
                 <ui-badge
-                    v-if="!readOnly && showSetAlt"
+                    v-if="!readOnly && showSetAlt && !showFilename"
                     as="button"
                     color="sky"
                     :text="__('Set Alt')"

From 54a002b9b1ac199edb7fc2df423fff84df1490e4 Mon Sep 17 00:00:00 2001
From: kjetilhole <kjetilhole07@gmail.com>
Date: Fri, 9 Jan 2026 15:29:32 +0100
Subject: [PATCH 4/9] Replace blue color with sky

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

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index ef0b2315725..595ab69b2f6 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -63,7 +63,7 @@
             <div class="truncate w-18 text-xs text-gray-600 dark:text-gray-400 flex-1 px-2 py-1" v-tooltip="label" :class="{ 'text-center': !needsAlt }">
                 {{ label }}
             </div>
-            <ui-badge as="button" size="sm" color="blue"  @click="editOrOpen" v-if="asset.isEditable && showSetAlt && needsAlt" :text="asset.values.alt ? '✅' : __('Set Alt')" />
+            <ui-badge as="button" size="sm" color="sky"  @click="editOrOpen" v-if="asset.isEditable && showSetAlt && needsAlt" :text="asset.values.alt ? '✅' : __('Set Alt')" />
         </div>
     </div>
 </template>

From e97e6c58c6a130c6fa60ca374423703e2c7b57c9 Mon Sep 17 00:00:00 2001
From: kjetilhole <kjetilhole07@gmail.com>
Date: Fri, 9 Jan 2026 15:29:43 +0100
Subject: [PATCH 5/9] Make alt button show even if alt text is set

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

diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index 301fbc0416b..430bbfd3cc8 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -33,7 +33,7 @@
         </td>
         <td class="absolute top-0 right-0 flex items-center bg-gradient-to-r to-20% from-transparent to-white dark:to-gray-900 p-3 ps-[2rem] align-middle text-end group-hover:to-gray-50 dark:group-hover:to-gray-900">
             <ui-badge
-                v-if="showSetAlt && needsAlt"
+                v-if="showSetAlt"
                 as="button"
                 color="sky"
                 :text="__('Set Alt')"

From 6343cfebbcda910679b21cc205a4dccdff650f47 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 12 Jan 2026 11:17:08 +0000
Subject: [PATCH 6/9] Move alt text control to the corner of the tile instead
 of hiding it in hover actions

---
 resources/js/components/fieldtypes/assets/AssetTile.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 595ab69b2f6..f0c08dc0af3 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -39,8 +39,8 @@
             <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 hover:opacity-100 duration-100 gap-2">
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
-                        <ui-button :size="showFilename ? 'sm' : 'xs'" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
-                        <ui-button :size="showFilename ? 'sm' : 'xs'" @click="remove" icon="x" aria-label="__('Remove')" />
+                        <ui-button size="sm" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
+                        <ui-button size="xs" @click="remove" icon="x" aria-label="__('Remove')" />
                     </template>
 
                     <template v-else>
@@ -48,10 +48,12 @@
                         <ui-button icon="download" size="sm" v-if="asset.isViewable" @click="download" :aria-label="__('Download file')" />
                     </template>
                 </div>
-
+            </div>
+            <div class="absolute bottom-1 right-1">
                 <ui-badge
                     v-if="!readOnly && showSetAlt && !showFilename"
                     as="button"
+                    size="sm"
                     color="sky"
                     :text="__('Set Alt')"
                     @click="editOrOpen"

From 977150a9b6978114765fefc4b9eaf98a7a6413e7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 12 Jan 2026 11:19:55 +0000
Subject: [PATCH 7/9] Revert some button changes

---
 resources/js/components/fieldtypes/assets/AssetTile.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index f0c08dc0af3..16584786722 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -36,11 +36,11 @@
                 </template>
 
             </div>
-            <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 hover:opacity-100 duration-100 gap-2">
+            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 duration-100 gap-2">
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
                         <ui-button size="sm" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
-                        <ui-button size="xs" @click="remove" icon="x" aria-label="__('Remove')" />
+                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" />
                     </template>
 
                     <template v-else>

From 782ad503110d1b94dec252f934cbc357c1f56706 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 12 Jan 2026 11:26:51 +0000
Subject: [PATCH 8/9] Only show if it needs the Alt

---
 resources/js/components/fieldtypes/assets/AssetRow.vue  | 2 +-
 resources/js/components/fieldtypes/assets/AssetTile.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index 430bbfd3cc8..301fbc0416b 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -33,7 +33,7 @@
         </td>
         <td class="absolute top-0 right-0 flex items-center bg-gradient-to-r to-20% from-transparent to-white dark:to-gray-900 p-3 ps-[2rem] align-middle text-end group-hover:to-gray-50 dark:group-hover:to-gray-900">
             <ui-badge
-                v-if="showSetAlt"
+                v-if="showSetAlt && needsAlt"
                 as="button"
                 color="sky"
                 :text="__('Set Alt')"
diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 16584786722..74b0f815585 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -51,7 +51,7 @@
             </div>
             <div class="absolute bottom-1 right-1">
                 <ui-badge
-                    v-if="!readOnly && showSetAlt && !showFilename"
+                    v-if="!readOnly && showSetAlt && needsAlt && !showFilename"
                     as="button"
                     size="sm"
                     color="sky"

From f38399076019c0083ebc7143c3c3b7faf974a750 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 12 Jan 2026 11:28:11 +0000
Subject: [PATCH 9/9] Revert gap change

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

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 74b0f815585..b2059b1d983 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -36,7 +36,7 @@
                 </template>
 
             </div>
-            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 duration-100 gap-2">
+            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 duration-100">
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
                         <ui-button size="sm" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />