From 36cd07a219d124830e444360dc9210bb9a0fbf83 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Tue, 1 Sep 2026 15:11:49 +0700
Subject: [PATCH] Polish team member badges

---
 app/api/teams/[teamId]/image/route.tsx | 33 +++++++++++++++-----------
 components/public/team-search.tsx      |  2 +-
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/api/teams/[teamId]/image/route.tsx b/app/api/teams/[teamId]/image/route.tsx
index f6d04da..ece365a 100644
--- a/app/api/teams/[teamId]/image/route.tsx
+++ b/app/api/teams/[teamId]/image/route.tsx
@@ -105,24 +105,29 @@ export async function GET(
           const percent = total > 0 ? (damage / total) * 100 : 0;
           return (
             <div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14, borderRadius: 16, background: elementBackgroundColor(member.character.element), padding: 6 }}>
-              {memberAssets[index].character ? (
-                <img
-                  src={memberAssets[index].character}
-                  alt=""
-                  width={78}
-                  height={78}
-                  style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), objectFit: "cover" }}
-                />
-              ) : (
-                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#b9b9c2", fontSize: 30 }}>
-                  {member.character.name.slice(0, 1)}
+              <div style={{ position: "relative", display: "flex", width: 78, height: 78, flexShrink: 0, overflow: "hidden", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity) }}>
+                {memberAssets[index].character ? (
+                  <img
+                    src={memberAssets[index].character}
+                    alt=""
+                    width={78}
+                    height={78}
+                    style={{ objectFit: "cover" }}
+                  />
+                ) : (
+                  <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", color: "#b9b9c2", fontSize: 30 }}>
+                    {member.character.name.slice(0, 1)}
+                  </div>
+                )}
+                <div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
+                  C{member.constellation}
                 </div>
-              )}
+              </div>
               <div style={{ display: "flex", gap: 6 }}>
                 {member.weapon && memberAssets[index].weapon ? (
                   <div style={{ position: "relative", display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.weapon.rarity) }}>
                     <img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
-                    <div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "transparent", color: "#000000", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
+                    <div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
                       R{member.refinement}
                     </div>
                   </div>
@@ -135,7 +140,7 @@ export async function GET(
               </div>
               <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} {member.character.name}</div>
+                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>{member.character.name}</div>
                   <div style={{ display: "flex", color: "#f7f7f7", fontSize: 18 }}>{amount(damage)}</div>
                 </div>
                 <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index 767b831..5cdb7ae 100644
--- a/components/public/team-search.tsx
+++ b/components/public/team-search.tsx
@@ -112,7 +112,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                                   fill
                                   className="object-contain p-1"
                                 />
-                                <Kbd className="absolute top-0 left-0 bg-transparent text-white">
+                                <Kbd className="absolute top-0 left-0 whitespace-nowrap bg-transparent text-white">
                                   R{member.refinement}
                                 </Kbd>
                               </div>