[6.x] Asset fixes for the Grid fieldtype (#13058)

Author: JayGeorge

resources/css/components/fieldtypes/grid.css

@@ -1,6 +1,5 @@
-/* ==========================================================================
-   Grid Fieldtype
-   ========================================================================== */
+/* GRID FIELDTYPE 
+=================================================== */
 @layer ui {
     .grid-table {
         @apply bg-white dark:bg-gray-900 relative w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-dark-150 text-start;
@@ -100,4 +99,32 @@
     .grid-item-header {
         @apply flex cursor-move items-center justify-between border-b bg-gray-200 px-4 py-2 text-sm outline-hidden;
     }
+}
+
+/* GRID FIELDTYPE / Assets fieldtype in a grid fieldtype
+=================================================== */
+/* Table UI mode */
+.grid-table .grid-cell.assets-fieldtype:not(:has([data-asset-picker])) > *,
+/* Stacked UI mode */
+.grid-stacked [data-asset-browser]:not(:has([data-asset-picker])) {
+    /* Wrap a border around the container instead of dealing with complex nested table elements, because borders and border-radius don't work as expected with nested table elements */
+    @apply border-gray-300 dark:border-gray-700 border-1 rounded-lg;
+    /* Prevent the descended table elements from inheriting this, such as the img thumbnail and the delete button */
+    *:not(button, button *) {
+        @apply rounded-lg border-none;
+    }
+}
+/* GRID FIELDTYPE / Assets fieldtype in a grid fieldtype / Row Compression
+=================================================== */
+/* When a grid field has at least 2 columns (so 3 including the menu control) change the presentation and compress the padding so it fits in with the other grid cells */
+/* Table UI Mode */
+.grid-table tr:has(> :nth-child(3)) .grid-cell.assets-fieldtype:not(:has([data-asset-picker])) > * {
+    @apply shadow-ui-sm;
+    td {
+        padding: 0.3125rem;
+    }
+}
+/* Stacked UI mode */
+.grid-stacked:not(:has([data-asset-picker])) .publish-fields:has(> :nth-child(3)) .assets-fieldtype td {
+    padding: 0.3125rem;
 }

resources/js/components/fieldtypes/assets/AssetRow.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Safari doesn't support `position: relative` on `<tr>` elements, but these two properties can be used as an alternative. Source: https://mtsknn.fi/blog/relative-tr-in-safari/ transform: translate(0); clip-path: inset(0); -->
-    <tr class="relative cursor-grab bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-900 border-b dark:border-dark-500 last:border-b-0" style="transform: translate(0); clip-path: inset(0);">
+    <tr class="group relative cursor-grab bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-900 border-b dark:border-dark-500 last:border-b-0" style="transform: translate(0); clip-path: inset(0);">
         <td class="flex gap-2 sm:gap-3 h-full items-center p-3">
             <div
                 v-if="canShowSvg"
@@ -31,7 +31,7 @@
                 {{ asset.basename }}
             </button>
         </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">
+        <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"
                 as="button"

resources/js/components/fieldtypes/assets/AssetsFieldtype.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="@container relative w-full bg-gray-50 dark:bg-transparent rounded-xl">
+    <div data-asset-browser class="@container relative w-full bg-gray-50 dark:bg-transparent rounded-xl">
         <div
             v-if="hasPendingDynamicFolder"
             class="w-full rounded-md border border-dashed px-4 py-3 text-sm text-gray-700 dark:border-gray-300 dark:text-gray-200"
@@ -28,6 +28,7 @@
 
                 <div
                     v-if="!isReadOnly && showPicker"
+                    data-asset-picker
                     class="not-[.link-fieldtype_&]:p-2 not-[.link-fieldtype_&]:border border-gray-300 dark:border-gray-700 dark:bg-gray-850 rounded-xl flex flex-col @2xs:flex-row items-center gap-2 sm:gap-3 gap-y-3"
                     :class="{
                         'rounded-b-none': expanded,
@@ -124,10 +125,10 @@
 
                     <div class="relative overflow-hidden rounded-xl border border-gray-300 dark:border-gray-700 not-[.link-fieldtype_&]:border-t-0! not-[.link-fieldtype_&]:rounded-t-none" v-if="displayMode === 'list'">
                         <table class="table-fixed w-full">
-                            <thead>
+                            <thead class="sr-only">
                                 <tr>
-                                    <th class="sr-only">Asset</th>
-                                    <th class="sr-only">Actions</th>
+                                    <th>Asset</th>
+                                    <th>Actions</th>
                                 </tr>
                             </thead>
                             <sortable-list