From 9eda1c77bd29bf166f2b838330713f30529950b6 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 2 Apr 2026 12:25:31 +0300
Subject: [PATCH] scale profile badge icons with font size

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ProfileBadges.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/ProfileBadges.tsx b/src/components/ProfileBadges.tsx
index dd0cedfe8f..22c682bbba 100644
--- a/src/components/ProfileBadges.tsx
+++ b/src/components/ProfileBadges.tsx
@@ -1,7 +1,7 @@
-import {View} from 'react-native'
+import {useWindowDimensions, View} from 'react-native'
 
 import {useProfileShadow} from '#/state/cache/profile-shadow'
-import {atoms as a, type ViewStyleProp} from '#/alf'
+import {atoms as a, useAlf, type ViewStyleProp} from '#/alf'
 import {BotBadge, BotBadgeButton, isBotAccount} from '#/components/BotBadge'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -38,12 +38,21 @@ export function ProfileBadges({
 }) {
   const shadowed = useProfileShadow(profile)
   const verification = useSimpleVerificationState({profile})
+  const {fontScale: nativeScaleMultiplier} = useWindowDimensions()
+  const {
+    fonts: {scaleMultiplier: alfScaleMultiplier},
+  } = useAlf()
 
   // if nothing to show, don't render the container at all
   if (!verification.showBadge && !isBotAccount(shadowed)) return null
 
   const isOnTheSmallSide = size === 'xs' || size === 'sm'
 
+  const verificationIconWidth =
+    verificationIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
+  const botIconWidth =
+    botIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
+
   return (
     <View
       style={[
@@ -56,19 +65,19 @@ export function ProfileBadges({
         <>
           <VerificationCheckButton
             profile={shadowed}
-            width={verificationIconSizes[size]}
+            width={verificationIconWidth}
           />
-          <BotBadgeButton profile={shadowed} width={botIconSizes[size]} />
+          <BotBadgeButton profile={shadowed} width={botIconWidth} />
         </>
       ) : (
         <>
           {verification.showBadge && (
             <VerificationCheck
               verifier={verification.role === 'verifier'}
-              width={verificationIconSizes[size]}
+              width={verificationIconWidth}
             />
           )}
-          <BotBadge profile={shadowed} width={botIconSizes[size]} />
+          <BotBadge profile={shadowed} width={botIconWidth} />
         </>
       )}
     </View>