From d30c6b49fd817d746119c600db7939c00b50bac3 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Sun, 26 Apr 2026 09:40:58 -0400
Subject: [PATCH] style(admin): improve icon card layout and label display in
 icons devkit page

---
 src/features/admin/devkit/IconsPage.client.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/features/admin/devkit/IconsPage.client.js b/src/features/admin/devkit/IconsPage.client.js
index 55be072..9e0f006 100644
--- a/src/features/admin/devkit/IconsPage.client.js
+++ b/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>