From 1cf3ed6307bce0186da45cced78a04ffdf4e7ee4 Mon Sep 17 00:00:00 2001
From: Andy Chen <44120813+achen5671@users.noreply.github.com>
Date: Wed, 7 Aug 2024 07:19:04 -0400
Subject: [PATCH] center and elipse long text (#10895)

---
 .../editor/panels/Properties/elementList/index.tsx        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
index c8adf74ff7..b8260493b6 100644
--- a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
+++ b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
@@ -130,13 +130,15 @@ const SceneElementListItem = ({
   return (
     <button
       className={twMerge(
-        'col-span-1 grid place-items-center gap-1 text-ellipsis rounded-xl border-[1px] border-[#212226] bg-theme-primary px-3 py-2.5 text-sm font-medium',
+        'place-items-center gap-1 rounded-xl border-[1px] border-[#212226] bg-theme-primary px-3 py-2.5 text-sm font-medium',
         selected ? 'text-primary border-[#42454D] bg-[#212226]' : 'text-[#B2B5BD]'
       )}
       onClick={onClick}
     >
-      {icon}
-      {categoryTitle}
+      <div className="flex flex-col items-center justify-center">
+        {icon}
+        <div className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap">{categoryTitle}</div>
+      </div>
     </button>
   )
 }