feat: Replaced run-on dot-separated topic stats on CreatorDetail with c…

- "frontend/src/pages/CreatorDetail.tsx"
- "frontend/src/App.css"

GSD-Task: S02/T02

frontend/src/App.css

@@ -2122,6 +2122,13 @@ a.app-footer__repo:hover {
   color: var(--color-text-secondary);
 }
 
+.creator-detail__topic-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-items: center;
+}
+
 .creator-techniques {
   margin-top: 1.5rem;
 }

frontend/src/pages/CreatorDetail.tsx

@@ -14,6 +14,7 @@ import {
   type TechniqueListItem,
 } from "../api/public-client";
 import CreatorAvatar from "../components/CreatorAvatar";
+import { catSlug } from "../utils/catSlug";
 
 export default function CreatorDetail() {
   const { slug } = useParams<{ slug: string }>();
@@ -109,6 +110,7 @@ export default function CreatorDetail() {
             {techniques.length > 0 && (
               <>
                 <span className="queue-card__separator">·</span>
+                <span className="creator-detail__topic-pills">
                   {Object.entries(
                     techniques.reduce<Record<string, number>>((acc, t) => {
                       const cat = t.topic_category || "Uncategorized";
@@ -117,12 +119,12 @@ export default function CreatorDetail() {
                     }, {}),
                   )
                     .sort(([, a], [, b]) => b - a)
-                  .map(([cat, count], i) => (
+                    .map(([cat, count]) => (
-                    <span key={cat} className="creator-detail__topic-stat">
+                      <span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
-                      {i > 0 && <span className="queue-card__separator">·</span>}
                         {cat}: {count}
                       </span>
                     ))}
+                </span>
               </>
             )}
           </span>