From 34965e7d923eff218e6ed8e6e149c0fce61eecdd Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:02:30 +0300
Subject: [PATCH] Fix UserCard overflow by stacking brand+verified for XP

---
 .../user-card/components/UserCard.module.css     | 10 ++++++++++
 app/features/user-card/components/UserCard.tsx   | 16 ++++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/features/user-card/components/UserCard.module.css b/app/features/user-card/components/UserCard.module.css
index d72c0a3b8..b7910dc5d 100644
--- a/app/features/user-card/components/UserCard.module.css
+++ b/app/features/user-card/components/UserCard.module.css
@@ -134,6 +134,16 @@
 	gap: var(--s-1);
 }
 
+.xpPrimaryIcons {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.xpPrimaryIcons:empty {
+	display: none;
+}
+
 .xpVerified {
 	display: inline-flex;
 	align-items: center;
diff --git a/app/features/user-card/components/UserCard.tsx b/app/features/user-card/components/UserCard.tsx
index 9968af5c3..a48582c4a 100644
--- a/app/features/user-card/components/UserCard.tsx
+++ b/app/features/user-card/components/UserCard.tsx
@@ -563,10 +563,18 @@ function Stat({ stat }: { stat: UserCardData["stats"][number] }) {
 				<span className={clsx(styles.stat, styles.xpStat)}>
 					{primary ? (
 						<span className={styles.xpPrimary}>
-							{primary.isVerified ? (
-								<BadgeCheck className={styles.xpVerifiedIconLarge} />
-							) : null}
-							<DivImage region={primary.region} />
+							<span className={styles.xpPrimaryIcons}>
+								{primary.isVerified ? (
+									<BadgeCheck
+										className={
+											primary.region === "WEST"
+												? styles.xpVerifiedIconSmall
+												: styles.xpVerifiedIconLarge
+										}
+									/>
+								) : null}
+								<DivImage region={primary.region} />
+							</span>
 							{primary.points}
 							{t("user:card.xp")}
 						</span>