style(admin): improve icon card layout and label display in icons devkit page

src/features/admin/devkit/IconsPage.client.js

@@ -82,11 +82,13 @@ export default function IconsPage() {
                 <button
                   key={name}
                   onClick={() => handleCopy(name)}
-                  title={name}
-                  className="aspect-square flex flex-col items-center justify-center gap-1.5 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 hover:border-blue-500 dark:hover:border-blue-500 transition-colors duration-100 group cursor-pointer p-2"
+                  title={name.replace('Icon', '')}
+                  className="flex flex-col items-center rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 hover:border-blue-500 dark:hover:border-blue-500 transition-colors duration-100 group cursor-pointer px-1 pt-2.5 pb-2"
                 >
-                  <IconComponent className="w-6 h-6 text-black dark:text-white" />
-                  <span className="text-[9px] text-neutral-500 dark:text-neutral-400 leading-tight text-center break-all line-clamp-2 group-hover:text-neutral-600 dark:group-hover:text-neutral-300 w-full px-0.5">
+                  <div className="flex items-center justify-center h-8 w-full">
+                    <IconComponent className="w-7 h-7 text-black dark:text-white" />
+                  </div>
+                  <span className="mt-1.5 text-[9px] text-neutral-500 dark:text-neutral-400 leading-none text-center truncate group-hover:text-neutral-600 dark:group-hover:text-neutral-300 w-full px-1">
                     {name.replace('Icon', '')}
                   </span>
                 </button>