From a7eec53a55c887d313aad3cbd4206c2a8a06b578 Mon Sep 17 00:00:00 2001
From: Andy Chen <44120813+achen5671@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:09:46 -0400
Subject: [PATCH] studio: fix asset grid (#10815)

* fix asset grid

* center loading view

* actually center loading view

* no actually center correctly this time

* add margin under thumbail

---------

Co-authored-by: Liam Broza <mrhegemon@users.noreply.github.com>
---
 .../editor/panels/Assets/container/index.tsx     | 16 +++++++++-------
 .../ui/src/primitives/tailwind/Table/index.tsx   |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Assets/container/index.tsx b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
index 09472a220e..8d7f69d3ce 100644
--- a/packages/ui/src/components/editor/panels/Assets/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
@@ -173,10 +173,10 @@ const ResourceFile = (props: {
         })
       }
       onContextMenu={handleContextMenu}
-      className="mb-2 flex cursor-pointer flex-col items-center justify-center align-middle"
+      className="mb-3 flex h-auto w-40 cursor-pointer flex-col items-center text-center"
     >
       <span
-        className={`mb-[5px] h-40 w-40 text-[70px] ${
+        className={`mx-4 mb-3 mt-2 h-40 w-40 font-['Figtree'] ${
           selected ? 'rounded-lg border border-blue-primary bg-theme-studio-surface' : ''
         }`}
       >
@@ -515,7 +515,7 @@ const AssetPanel = () => {
   const ResourceItems = () => {
     if (loading.value) {
       return (
-        <div className="col-start-2 flex items-center justify-center">
+        <div className="flex h-full w-full items-center justify-center">
           <LoadingView title={t('editor:loadingAssets')} fullSpace className="block h-12 w-12" />
         </div>
       )
@@ -663,14 +663,16 @@ const AssetPanel = () => {
           onSelectCategory={handleSelectCategory}
           style={{ width: width.value }}
         />
-        <div className="flex w-[20px] cursor-pointer resize items-center">
+        <div className="flex w-[20px] cursor-pointer items-center">
           <HiDotsVertical onMouseDown={handleMouseDown} className="text-white" />
         </div>
         <div className="flex h-full w-full flex-col overflow-auto">
-          <div className="grid grid-cols-[repeat(auto-fit,minmax(170px,1fr))] gap-2 p-2">
-            <ResourceItems />
+          <div className="flex-grow overflow-y-scroll p-2">
+            <div className="mt-auto flex h-full w-full flex-wrap gap-2">
+              <ResourceItems />
+            </div>
           </div>
-          <div className="mx-auto mb-10">
+          <div className="mx-auto mb-10 mt-auto">
             <TablePagination
               totalPages={staticResourcesPagination.totalPages.value}
               currentPage={staticResourcesPagination.currentPage.value}
diff --git a/packages/ui/src/primitives/tailwind/Table/index.tsx b/packages/ui/src/primitives/tailwind/Table/index.tsx
index ab89e040c1..fd64eab93b 100644
--- a/packages/ui/src/primitives/tailwind/Table/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Table/index.tsx
@@ -154,7 +154,7 @@ const TablePagination = ({
   }
 
   return (
-    <div className="flex-column mb-2 flex flex-wrap items-center justify-between pt-4 md:flex-row">
+    <div className="flex-column mb-2 flex flex-wrap items-center justify-center pt-4 md:flex-row">
       <ul className="inline-flex h-8 -space-x-px text-sm rtl:space-x-reverse">
         <li>
           <button