feat : update mutilple apply

components/public/scrollable-nav.tsx

@@ -58,7 +58,7 @@ export function ScrollableNav({
       <nav
         ref={navRef}
         aria-label={ariaLabel}
-        className="flex min-w-0 flex-1 gap-1 overflow-x-auto [scrollbar-width:none]"
+        className="flex min-w-0 flex-1 gap-1 overflow-x-auto scrollbar-none"
       >
         {children}
       </nav>

components/public/team-search.tsx

@@ -38,28 +38,16 @@ function ArtifactHalf({
   sizes: string;
 }) {
   const content = (
-    <>
-      <span className="relative block size-full">
-        <Image
-          src={artifact.imageUrl}
-          alt={linked ? artifact.name : ""}
-          fill
-          loading={eager ? "eager" : undefined}
-          sizes={sizes}
-          className="object-contain p-1"
-        />
-      </span>
-      {linked ? (
-        <Kbd
-          className={cn(
-            "absolute h-3 min-w-3 bg-transparent p-0 text-white",
-            side === "left" ? "bottom-0 left-0" : "top-0 right-0",
-          )}
-        >
-          <ArrowUpRightIcon aria-hidden="true" />
-        </Kbd>
-      ) : null}
-    </>
+    <span className="relative block size-full">
+      <Image
+        src={artifact.imageUrl}
+        alt={linked ? artifact.name : ""}
+        fill
+        loading={eager ? "eager" : undefined}
+        sizes={sizes}
+        className="object-contain p-1"
+      />
+    </span>
   );
   const className = cn(
     "absolute inset-0 overflow-hidden",
@@ -153,6 +141,11 @@ function TeamArtifactIcon({
         aria-hidden="true"
         className="pointer-events-none absolute top-1/2 left-1/2 h-px w-[142%] -translate-x-1/2 -translate-y-1/2 rotate-45 bg-white/30"
       />
+      {linked ? (
+        <Kbd className="pointer-events-none absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
+          <ArrowUpRightIcon aria-hidden="true" />
+        </Kbd>
+      ) : null}
     </div>
   );
 }
@@ -161,7 +154,7 @@ function TeamExportImage({ team }: { team: Team }) {
   const total = team.members.reduce((sum, member) => sum + Number(member.damage), 0);
   const seconds = Number(team.rotationSeconds);
   return (
-    <div className="flex min-h-[1350px] w-[1080px] flex-col bg-[#05060a] p-[48px_52px] font-heading text-[white]">
+    <div className="flex min-h-337.5 w-270 flex-col bg-[#05060a] p-[48px_52px] font-heading text-[white]">
       <header className="flex flex-col items-center text-center">
         <h2 className="text-[64px] leading-tight font-bold">{team.title}</h2>
         <p className="text-[32px] text-[#b9b9c2]">ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ</p>
@@ -171,8 +164,8 @@ function TeamExportImage({ team }: { team: Team }) {
           const damage = Number(member.damage);
           const percent = total > 0 ? damage / total * 100 : 0;
           return (
-            <div key={member.position} className="flex h-[174px] items-center gap-6 rounded-3xl p-3.5" style={{ backgroundColor: elementBackgroundColor(member.character.element) }}>
-              <div className={cn("relative size-[140px] shrink-0 overflow-hidden rounded-3xl border-[3px] border-white/20", rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity))}>
+            <div key={member.position} className="flex h-43.5 items-center gap-6 rounded-3xl p-3.5" style={{ backgroundColor: elementBackgroundColor(member.character.element) }}>
+              <div className={cn("relative size-35] shrink-0 overflow-hidden rounded-3xl border-[3px] border-white/20", rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity))}>
                 <Image src={member.character.imageUrl} alt="" fill loading="eager" sizes="140px" className="object-contain" />
                 <span className="absolute top-1.5 left-1.5 text-xl font-bold">C{member.constellation}</span>
               </div>
@@ -188,7 +181,7 @@ function TeamExportImage({ team }: { team: Team }) {
               </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>
-                <div className="flex items-center gap-5"><div className="h-11 flex-1 overflow-hidden rounded-xl bg-[#272730]"><div className="h-full rounded-xl bg-gradient-to-r from-[#b7791f] to-[#f0b72f]" style={{ width: `${Math.max(2, Math.min(100, percent))}%` }} /></div><span className="w-28 text-right text-[34px] font-bold">{percent.toFixed(1)}%</span></div>
+                <div className="flex items-center gap-5"><div className="h-11 flex-1 overflow-hidden rounded-xl bg-[#272730]"><div className="h-full rounded-xl bg-linear-to-r from-[#b7791f] to-[#f0b72f]" style={{ width: `${Math.max(2, Math.min(100, percent))}%` }} /></div><span className="w-28 text-right text-[34px] font-bold">{percent.toFixed(1)}%</span></div>
               </div>
             </div>
           );