From 0648022a011c49aef3f2374528a89d8d207f19c8 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Fri, 4 Sep 2026 07:53:21 +0700
Subject: [PATCH] fix(team-calc) : update artifact card layout

---
 components/public/team-search.tsx | 109 ++++++++++++++++--------------
 1 file changed, 58 insertions(+), 51 deletions(-)

diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index 6f1e72d..6a10f01 100644
--- a/components/public/team-search.tsx
+++ b/components/public/team-search.tsx
@@ -146,7 +146,7 @@ function TeamCard({
                       tabIndex={exporting ? -1 : undefined}
                       aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
                       className={cn(
-                        "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none sm:col-span-2",
+                        "relative col-span-2 aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none",
                         rarityGradientClass(member.weapon.rarity),
                       )}
                     >
@@ -167,56 +167,63 @@ function TeamCard({
                   ) : (
                     <div className="col-span-2 aspect-square rounded-md border bg-muted" />
                   )}
-                  {member.artifact ? (
-                    <Link
-                      href={`https://lunaris.moe/artifact/${encodeURIComponent(member.artifact.key)}`}
-                      target="_blank"
-                      rel="noreferrer"
-                      tabIndex={exporting ? -1 : undefined}
-                      aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
-                      className={cn(
-                        "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted",
-                        rarityGradientClass(member.artifact.rarity),
-                      )}
-                    >
-                      <Image
-                        src={member.artifact.imageUrl}
-                        alt={member.artifact.name}
-                        fill
-                        loading={exporting ? "eager" : undefined}
-                        className="object-contain p-1"
-                      />
-                      <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
-                        <ArrowUpRightIcon aria-hidden="true" />
-                      </Kbd>
-                    </Link>
-                  ) : (
-                    <div className="aspect-square rounded-md border bg-muted" />
-                  )}
-                  {member.secondArtifact ? (
-                    <Link
-                      href={`https://lunaris.moe/artifact/${encodeURIComponent(member.secondArtifact.key)}`}
-                      target="_blank"
-                      rel="noreferrer"
-                      tabIndex={exporting ? -1 : undefined}
-                      aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.secondArtifact.name} บน Lunaris`}
-                      className={cn(
-                        "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted",
-                        rarityGradientClass(member.secondArtifact.rarity),
-                      )}
-                    >
-                      <Image
-                        src={member.secondArtifact.imageUrl}
-                        alt={member.secondArtifact.name}
-                        fill
-                        loading={exporting ? "eager" : undefined}
-                        className="object-contain p-1"
-                      />
-                      <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
-                        <ArrowUpRightIcon aria-hidden="true" />
-                      </Kbd>
-                    </Link>
-                  ) : null}
+                  <div
+                    className={cn(
+                      "col-span-2 grid",
+                      member.secondArtifact && "w-[150%] grid-cols-3 gap-2",
+                    )}
+                  >
+                    {member.artifact ? (
+                      <Link
+                        href={`https://lunaris.moe/artifact/${encodeURIComponent(member.artifact.key)}`}
+                        target="_blank"
+                        rel="noreferrer"
+                        tabIndex={exporting ? -1 : undefined}
+                        aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
+                        className={cn(
+                          "relative col-span-2 aspect-square scale-110 overflow-hidden rounded-md bg-muted",
+                          rarityGradientClass(member.artifact.rarity),
+                        )}
+                      >
+                        <Image
+                          src={member.artifact.imageUrl}
+                          alt={member.artifact.name}
+                          fill
+                          loading={exporting ? "eager" : undefined}
+                          className="object-contain p-1"
+                        />
+                        <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
+                          <ArrowUpRightIcon aria-hidden="true" />
+                        </Kbd>
+                      </Link>
+                    ) : (
+                      <div className="col-span-2 aspect-square rounded-md border bg-muted" />
+                    )}
+                    {member.secondArtifact ? (
+                      <Link
+                        href={`https://lunaris.moe/artifact/${encodeURIComponent(member.secondArtifact.key)}`}
+                        target="_blank"
+                        rel="noreferrer"
+                        tabIndex={exporting ? -1 : undefined}
+                        aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.secondArtifact.name} บน Lunaris`}
+                        className={cn(
+                          "relative col-span-2 col-start-2 row-start-1 aspect-square scale-110 overflow-hidden rounded-md bg-muted",
+                          rarityGradientClass(member.secondArtifact.rarity),
+                        )}
+                      >
+                        <Image
+                          src={member.secondArtifact.imageUrl}
+                          alt={member.secondArtifact.name}
+                          fill
+                          loading={exporting ? "eager" : undefined}
+                          className="object-contain p-1"
+                        />
+                        <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
+                          <ArrowUpRightIcon aria-hidden="true" />
+                        </Kbd>
+                      </Link>
+                    ) : null}
+                  </div>
                 </div>
               </div>
               <p className="mt-2 truncate text-sm font-medium">