fix(team-calc) : keep loadout tiles aligned

components/public/team-search.tsx

@@ -37,9 +37,9 @@ function TeamExportImage({ team }: { team: Team }) {
                 <Image src={member.character.imageUrl} alt="" fill loading="eager" sizes="150px" className="object-contain" />
                 <span className="absolute top-1.5 left-1.5 text-xl font-bold">C{member.constellation}</span>
               </div>
-              <div className="grid grid-cols-2 gap-3">
-                {member.weapon ? <div className={cn("relative col-span-2 size-24 overflow-hidden rounded-2xl", rarityGradientClass(member.weapon.rarity))}><Image src={member.weapon.imageUrl} alt="" fill loading="eager" sizes="96px" className="object-contain p-1" /><span className="absolute top-1 left-1 text-base font-bold">R{member.refinement}</span></div> : null}
-                {[member.artifact, member.secondArtifact].map((item, index) => item ? <div key={`${item.key}-${index}`} className={cn("relative size-24 overflow-hidden rounded-2xl", rarityGradientClass(item.rarity))}><Image src={item.imageUrl} alt="" fill loading="eager" sizes="96px" className="object-contain p-1" /></div> : null)}
+              <div className="grid w-48 shrink-0 grid-cols-2 gap-3">
+                {member.weapon ? <div className={cn("relative aspect-square min-w-0 scale-110 overflow-hidden rounded-2xl", rarityGradientClass(member.weapon.rarity))}><Image src={member.weapon.imageUrl} alt="" fill loading="eager" sizes="96px" className="object-contain p-1" /><span className="absolute top-1 left-1 text-base font-bold">R{member.refinement}</span></div> : null}
+                {[member.artifact, member.secondArtifact].map((item, index) => item ? <div key={`${item.key}-${index}`} className={cn("relative aspect-square min-w-0 scale-110 overflow-hidden rounded-2xl", rarityGradientClass(item.rarity))}><Image src={item.imageUrl} alt="" fill loading="eager" sizes="96px" className="object-contain p-1" /></div> : null)}
               </div>
               <div className="flex min-w-0 flex-1 flex-col gap-3.5">
                 <div className="flex items-center justify-between gap-4"><span className="truncate text-[36px] font-semibold">{member.character.name}</span><span className="text-[36px]">{damage.toLocaleString()}</span></div>
@@ -102,16 +102,16 @@ function TeamCard({
                 className={cn(
                   "gap-2",
                   exporting
-                    ? "grid grid-cols-3"
-                    : "flex flex-col sm:grid sm:grid-cols-3",
+                    ? "grid grid-cols-5"
+                    : "flex flex-col sm:grid sm:grid-cols-5",
                 )}
               >
                 <div
                   className={cn(
                     "relative aspect-square min-h-0 overflow-hidden rounded-lg bg-muted",
                     exporting
-                      ? "col-span-2 row-span-2"
-                      : "sm:col-span-2 sm:row-span-2",
+                      ? "col-span-3 row-span-2"
+                      : "sm:col-span-3 sm:row-span-2",
                     rarityGradientClass(
                       isCustomTravelerKey(member.character.key)
                         ? 5
@@ -134,8 +134,8 @@ function TeamCard({
                   className={cn(
                     "min-w-0 grid grid-cols-2 gap-2",
                     exporting
-                      ? "col-span-1 row-span-2"
-                      : "sm:col-span-1 sm:row-span-2",
+                      ? "col-span-2 row-span-2"
+                      : "sm:col-span-2 sm:row-span-2",
                   )}
                 >
                   {member.weapon ? (
@@ -146,7 +146,7 @@ function TeamCard({
                       tabIndex={exporting ? -1 : undefined}
                       aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
                       className={cn(
-                        "relative col-span-2 aspect-square overflow-hidden rounded-md bg-muted outline-none",
+                        "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none",
                         rarityGradientClass(member.weapon.rarity),
                       )}
                     >
@@ -175,7 +175,7 @@ function TeamCard({
                       tabIndex={exporting ? -1 : undefined}
                       aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
                       className={cn(
-                        "relative aspect-square overflow-hidden rounded-md bg-muted",
+                        "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted",
                         rarityGradientClass(member.artifact.rarity),
                       )}
                     >
@@ -201,7 +201,7 @@ function TeamCard({
                       tabIndex={exporting ? -1 : undefined}
                       aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.secondArtifact.name} บน Lunaris`}
                       className={cn(
-                        "relative aspect-square overflow-hidden rounded-md bg-muted",
+                        "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted",
                         rarityGradientClass(member.secondArtifact.rarity),
                       )}
                     >