[6.x] Improve folder empty states in asset browser (#12452)

Author: duncanmcclean

resources/js/components/assets/Browser/Grid.vue

@@ -1,5 +1,8 @@
 <template>
-    <ui-card class="space-y-8">
+    <ui-card :class="{
+        'space-y-8': folders.length || assets.length,
+        '!p-0': folders.length === 0 && assets.length === 0
+    }">
         <!-- Folders -->
         <section class="folder-grid-listing" v-if="folders.length || creatingFolder">
             <div
@@ -165,6 +168,11 @@
                 <div class="asset-filename" v-text="truncateFilename(asset.basename)" :title="asset.basename" />
             </div>
         </section>
+
+        <!-- Empty state -->
+        <div v-if="folders.length === 0 && assets.length === 0" class="text-center text-gray-500 text-sm py-4">
+            {{ __('No items found') }}
+        </div>
     </ui-card>
 </template>
 

resources/js/components/ui/Listing/Table.vue

@@ -68,7 +68,7 @@ const forwardedTableCellSlots = computed(() => {
         </TableBody>
     </table>
     <div v-if="items.length === 0">
-        <div class="text-center text-gray-500 text-sm pt-4">
+        <div class="text-center text-gray-500 text-sm py-4">
             {{ __('No items found') }}
         </div>
     </div>