From acf6172b6eb0d80b86e7cb364455ea4cb9f8eb3a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 8 Mar 2026 12:20:25 +0100
Subject: [PATCH 1/2] fix(profile): show additional user badges in one line
 (@fehmer)

---
 .../src/ts/components/common/UserBadge.tsx    |  2 +-
 .../components/pages/profile/UserDetails.tsx  | 36 ++++++++++---------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/ts/components/common/UserBadge.tsx b/frontend/src/ts/components/common/UserBadge.tsx
index 03c953d7cd00..d844c7badf4d 100644
--- a/frontend/src/ts/components/common/UserBadge.tsx
+++ b/frontend/src/ts/components/common/UserBadge.tsx
@@ -31,7 +31,7 @@ export function UserBadge(props: {
         <Show when={badge()?.icon}>
           <Fa
             icon={badge()?.icon ?? "fa-question"}
-            fixedWidth={false}
+            fixedWidth={props.iconOnly === true}
             class="px-[0.75em] py-[0.5em]"
           />
           <Show when={!props.iconOnly}>
diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index 618426da0fdc..fa7b462ada53 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -303,22 +303,26 @@ function AvatarAndName(props: {
             length: balloonPosition() === "up" ? "medium" : undefined,
           }}
         />
-        <For
-          each={props.profile.inventory?.badges
-            .filter((it) => !it.selected)
-            .map((it) => it.id)}
-        >
-          {(badgeId) => (
-            <UserBadge
-              id={badgeId}
-              iconOnly
-              balloon={{
-                position: balloonPosition(),
-                length: balloonPosition() === "up" ? "medium" : undefined,
-              }}
-            />
-          )}
-        </For>
+        <Show when={(props.profile.inventory?.badges?.length ?? 0) > 1}>
+          <div class="flex flex-row gap-1">
+            <For
+              each={props.profile.inventory?.badges
+                .filter((it) => !it.selected)
+                .map((it) => it.id)}
+            >
+              {(badgeId) => (
+                <UserBadge
+                  id={badgeId}
+                  iconOnly
+                  balloon={{
+                    position: balloonPosition(),
+                    length: balloonPosition() === "up" ? "medium" : undefined,
+                  }}
+                />
+              )}
+            </For>
+          </div>
+        </Show>
         <div class="grid">
           <Balloon inline text={accountAgeHint()} position={balloonPosition()}>
             Joined {formatDate(props.profile.addedAt ?? 0, "dd MMM yyyy")}

From 36b3c5b05105ba04de0f96b88afc4b40ad266c55 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 8 Mar 2026 12:37:45 +0100
Subject: [PATCH 2/2] fix

---
 frontend/src/ts/components/common/UserBadge.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/common/UserBadge.tsx b/frontend/src/ts/components/common/UserBadge.tsx
index d844c7badf4d..c0ebd235fa71 100644
--- a/frontend/src/ts/components/common/UserBadge.tsx
+++ b/frontend/src/ts/components/common/UserBadge.tsx
@@ -19,7 +19,10 @@ export function UserBadge(props: {
   return (
     <Show when={badge() !== undefined}>
       <Balloon
-        class={cn("rounded-[0.5em] text-em-xs", props.class)}
+        class={cn(
+          "rounded-[0.5em] px-[0.75em] py-[0.5em] text-em-xs",
+          props.class,
+        )}
         text={badge()?.description ?? ""}
         {...props.balloon}
         style={{
@@ -32,7 +35,6 @@ export function UserBadge(props: {
           <Fa
             icon={badge()?.icon ?? "fa-question"}
             fixedWidth={props.iconOnly === true}
-            class="px-[0.75em] py-[0.5em]"
           />
           <Show when={!props.iconOnly}>
             <span class="hidden pr-[0.75em] md:inline">{badge()?.name}</span>