From 6203bf36e630409a8b41e988a5a8fd566672ae46 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Thu, 5 Mar 2026 16:55:54 +0300
Subject: [PATCH] fix: brand cards now square-shaped in a denser grid

Grid changed from 3-col to 5-col, cards use aspect-square layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/src/pages/Brands.jsx | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/client/src/pages/Brands.jsx b/client/src/pages/Brands.jsx
index 3295d20..11991e7 100644
--- a/client/src/pages/Brands.jsx
+++ b/client/src/pages/Brands.jsx
@@ -154,17 +154,17 @@ export default function Brands() {
           <p className="text-sm text-text-tertiary">{t('brands.noBrands')}</p>
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 stagger-children">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 stagger-children">
           {brands.map(brand => {
             const displayName = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
             return (
               <div
                 key={getBrandId(brand)}
-                className={`bg-white rounded-xl border border-border overflow-hidden hover:shadow-md transition-all ${isSuperadminOrManager ? 'cursor-pointer' : ''}`}
+                className={`bg-white rounded-xl border border-border overflow-hidden hover:shadow-md transition-all aspect-square flex flex-col ${isSuperadminOrManager ? 'cursor-pointer' : ''}`}
                 onClick={() => isSuperadminOrManager && openEditBrand(brand)}
               >
                 {/* Logo area */}
-                <div className="h-32 bg-surface-secondary flex items-center justify-center relative">
+                <div className="flex-1 bg-surface-secondary flex items-center justify-center relative min-h-0">
                   {brand.logo ? (
                     <img
                       src={`${API_BASE}/uploads/${brand.logo}`}
@@ -172,41 +172,39 @@ export default function Brands() {
                       className="w-full h-full object-contain p-4"
                     />
                   ) : (
-                    <div className="text-4xl">
-                      {brand.icon || <Image className="w-12 h-12 text-text-quaternary" />}
+                    <div className="text-3xl">
+                      {brand.icon || <Image className="w-10 h-10 text-text-quaternary" />}
                     </div>
                   )}
                   {isSuperadminOrManager && (
-                    <div className="absolute top-2 right-2 flex gap-1" onClick={e => e.stopPropagation()}>
+                    <div className="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100" onClick={e => e.stopPropagation()}>
                       <button
                         onClick={() => openEditBrand(brand)}
-                        className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-text-primary shadow-sm"
+                        className="p-1 bg-white/90 hover:bg-white rounded-md text-text-tertiary hover:text-text-primary shadow-sm"
                         title={t('common.edit')}
                       >
-                        <Edit2 className="w-3.5 h-3.5" />
+                        <Edit2 className="w-3 h-3" />
                       </button>
                       <button
                         onClick={() => { setBrandToDelete(brand); setShowDeleteModal(true) }}
-                        className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-red-500 shadow-sm"
+                        className="p-1 bg-white/90 hover:bg-white rounded-md text-text-tertiary hover:text-red-500 shadow-sm"
                         title={t('common.delete')}
                       >
-                        <Trash2 className="w-3.5 h-3.5" />
+                        <Trash2 className="w-3 h-3" />
                       </button>
                     </div>
                   )}
                 </div>
 
                 {/* Card body */}
-                <div className="p-4">
-                  <div className="flex items-center gap-2 mb-1">
-                    {brand.icon && <span className="text-lg">{brand.icon}</span>}
-                    <h3 className="text-sm font-semibold text-text-primary truncate">{displayName}</h3>
-                  </div>
-                  <div className="flex items-center gap-3 text-[11px] text-text-tertiary">
-                    {brand.name && <span>EN: {brand.name}</span>}
-                    {brand.name_ar && <span>AR: {brand.name_ar}</span>}
-                    <span>Priority: {brand.priority ?? '—'}</span>
+                <div className="p-3">
+                  <div className="flex items-center gap-1.5 mb-0.5">
+                    {brand.icon && <span className="text-sm">{brand.icon}</span>}
+                    <h3 className="text-xs font-semibold text-text-primary truncate">{displayName}</h3>
                   </div>
+                  <p className="text-[10px] text-text-tertiary truncate">
+                    {brand.name_ar && lang !== 'ar' ? brand.name_ar : brand.name}
+                  </p>
                 </div>
               </div>
             )