From 47437ecca8ceb0e2003e930e85f04fe708ad2ca3 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Fri, 24 Apr 2026 20:31:09 -0400
Subject: [PATCH] style(admin): improve icons grid layout and card appearance

- increase grid columns across breakpoints including md, 2xl, and custom 16-col
- add aspect-square and justify-center to icon cards for uniform sizing
- update card style with solid border and background instead of transparent hover-only
- enlarge icon size from w-5/h-5 to w-7/h-7 and set color to white
- add full-width and padding to icon label for better text containment
---
 src/features/admin/devkit/IconsPage.client.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/admin/devkit/IconsPage.client.js b/src/features/admin/devkit/IconsPage.client.js
index 687225e..a286161 100644
--- a/src/features/admin/devkit/IconsPage.client.js
+++ b/src/features/admin/devkit/IconsPage.client.js
@@ -52,16 +52,16 @@ export default function IconsPage() {
           Aucune icône trouvée pour &ldquo;{query}&rdquo;
         </p>
       ) : (
-        <div className="grid grid-cols-4 sm:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-2">
+        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-12 2xl:grid-cols-[repeat(16,minmax(0,1fr))] gap-2">
           {filtered.map(([name, IconComponent]) => (
             <button
               key={name}
               onClick={() => handleCopy(name)}
               title={name}
-              className="flex flex-col items-center gap-1.5 rounded-lg border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 p-3 transition-colors duration-100 group cursor-pointer"
+              className="aspect-square flex flex-col items-center justify-center gap-2 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"
             >
-              <IconComponent className="w-5 h-5 text-neutral-700 dark:text-neutral-300 group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors" />
-              <span className="text-[9px] text-neutral-400 dark:text-neutral-500 leading-tight text-center break-all line-clamp-2 group-hover:text-neutral-600 dark:group-hover:text-neutral-300">
+              <IconComponent className="w-7 h-7 text-white transition-colors" />
+              <span className="text-[9px] text-neutral-400 dark:text-neutral-500 leading-tight text-center break-all line-clamp-2 group-hover:text-neutral-600 dark:group-hover:text-neutral-300 w-full px-1">
                 {name.replace('Icon', '')}
               </span>
             </button>