Fix UserCard overflow by stacking brand+verified for XP

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;

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>