[6.x] Fix Asset field set to "Read-only" clipping filename (#14575)

Fix Asset field set to "Read-only" clipping filename

Closes #14489

Author: jackmcdade

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

@@ -1,15 +1,15 @@
 <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="group relative bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-900 border-b dark:border-gray-600 last:border-b-0" :class="{ 'cursor-grab': !readOnly }" style="transform: translate(0); clip-path: inset(0);">
-        <td class="flex gap-2 sm:gap-3 h-full items-center p-3">
+        <td class="flex h-full min-w-0 items-center gap-2 p-3 sm:gap-3">
             <div
                 v-if="canShowSvg"
                 class="img svg-img flex size-7 items-center justify-center bg-cover bg-center bg-no-repeat text-center"
                 :style="'background-image:url(' + thumbnail + ')'"
             ></div>
             <button
                 v-else
-                class="flex size-7 cursor-pointer items-center justify-center whitespace-nowrap"
+                class="flex size-7 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap"
                 @click="editOrOpen"
             >
                 <img
@@ -24,14 +24,15 @@
             <button
                 v-if="showFilename"
                 @click="editOrOpen"
-                class="w-full truncate text-sm text-gray-600 dark:text-gray-400 text-start"
+                class="min-w-0 flex-1 truncate text-start text-sm leading-5 text-gray-600 dark:text-gray-400"
                 :title="__('Edit')"
                 :aria-label="__('Edit Asset')"
             >
                 {{ asset.basename }}
             </button>
+            <div v-if="readOnly" v-text="asset.size" class="asset-filesize hidden shrink-0 px-2 text-sm leading-5 text-gray-600 dark:text-gray-400 @xs:block" />
         </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">
+        <td v-if="!readOnly" class="absolute top-0 right-0 flex items-center bg-linear-to-r to-20% from-transparent to-white p-3 ps-8 align-middle text-end group-hover:to-gray-50 dark:to-gray-900 dark:group-hover:to-gray-900">
             <ui-badge
                 v-if="showSetAlt && needsAlt"
                 as="button"
@@ -40,7 +41,7 @@
                 @click="editOrOpen"
             />
             <div v-text="asset.size" class="asset-filesize hidden px-2 text-sm text-gray-600 dark:text-gray-400 @xs:inline" />
-            <div v-if="!readOnly">
+            <div>
                 <ui-button
                     @click="remove"
                     icon="x"