style : readble img

components/public/structured-guide.tsx

@@ -370,13 +370,15 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
             </Card>
             {profile.substats.length ? (
               <Card>
-                <CardContent className="py-6 text-center text-lg">
-                  <strong>Stat Priority:</strong>{" "}
-                  {profile.substats.map((stat, index) => (
-                    <span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
-                      {index ? " > " : ""}{statLabel(stat)}
-                    </span>
-                  ))}
+                <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
+                  <strong>Stat Priority:</strong>
+                  <div className="flex flex-col items-center gap-1">
+                    {profile.substats.map((stat, index) => (
+                      <span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
+                        {statLabel(stat)}
+                      </span>
+                    ))}
+                  </div>
                 </CardContent>
               </Card>
             ) : null}
@@ -396,7 +398,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                       )}
                     >
                       <span className="flex min-w-0 items-center gap-2">
-                        {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain" /> : null}
+                        {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain brightness-0 invert" /> : null}
                         <span>{normalizeTargetStat(target.stat) ?? target.stat}</span>
                       </span>
                       <strong className="shrink-0">{target.value}</strong>
@@ -460,10 +462,10 @@ function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: stri
       <Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
       <p className="font-semibold">{label}</p>
       <Separator />
-      <div className="flex max-w-full flex-col items-center gap-1 text-sm leading-6 sm:text-base">
+      <div className="flex max-w-full flex-col items-center gap-1 text-xs leading-5 sm:text-sm sm:leading-6">
         {values.length
           ? values.map((value, index) => (
-              <span key={`${value}-${index}`} className={cn("max-w-full overflow-x-auto whitespace-nowrap", statPriorityColorClass(index))}>
+              <span key={`${value}-${index}`} className={cn("max-w-full break-words text-center", statPriorityColorClass(index))}>
                 {statLabel(value)}
               </span>
             ))