From 846668add970242b65afe94ee827b098ef63fcb2 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sat, 25 Apr 2026 19:12:00 +0330
Subject: [PATCH] refactor(tags): use a responsive compact card layout

---
 src/pages/Tags.tsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/pages/Tags.tsx b/src/pages/Tags.tsx
index bcb3037..238db38 100644
--- a/src/pages/Tags.tsx
+++ b/src/pages/Tags.tsx
@@ -171,20 +171,23 @@ export default function Tags() {
         <div className="p-12 flex justify-center text-slate-500">{t.loading || "Loading..."}</div>
       ) : (
         <div className="flex flex-col flex-1">
-          <div className="flex flex-col gap-4 mb-6">
+          <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
             {tags.map((tag) => (
-              <Card key={tag.id} className="dark:bg-slate-800 dark:border-slate-700 shadow-sm">
-                <CardContent className="flex items-center justify-between gap-4 py-4 px-6">
-                  <div className="flex items-center gap-4 min-w-0">
-                    <div className="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-700" style={{ backgroundColor: tag.color || DEFAULT_COLOR }} />
-                    <div className="min-w-0">
-                      <CardTitle className="text-lg truncate text-slate-900 dark:text-white">{tag.name}</CardTitle>
-                      <p className="text-sm text-slate-500 dark:text-slate-400">{tag.color || DEFAULT_COLOR}</p>
+              <Card key={tag.id} className="overflow-hidden shadow-sm dark:border-slate-700 dark:bg-slate-800">
+                <CardContent className="flex h-full flex-col gap-4 p-5">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex min-w-0 items-center gap-3">
+                      <div
+                        className="h-9 w-9 shrink-0 rounded-xl border border-slate-200 dark:border-slate-700"
+                        style={{ backgroundColor: tag.color || DEFAULT_COLOR }}
+                      />
+                      <div className="min-w-0">
+                        <CardTitle className="truncate text-base text-slate-900 dark:text-white">{tag.name}</CardTitle>
+                      </div>
                     </div>
-                  </div>
 
-                  {(canEditTag || canDeleteTag) && (
-                    <div className="flex items-center gap-2">
+                    {(canEditTag || canDeleteTag) && (
+                      <div className="flex shrink-0 items-center gap-1">
                       {canEditTag && (
                         <Button variant="ghost" size="icon" onClick={() => openEditModal(tag)} title={t.actions?.edit || "Edit"}>
                           <Edit2 className="w-4 h-4" />
@@ -200,8 +203,9 @@ export default function Tags() {
                           <Trash2 className="w-4 h-4 text-red-500" />
                         </Button>
                       )}
-                    </div>
-                  )}
+                      </div>
+                    )}
+                  </div>
                 </CardContent>
               </Card>
             ))}