Add scrollview to drawer

src/view/com/util/numeric/format.ts

@@ -3,3 +3,13 @@ export const formatCount = (num: number) =>
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(num)
+
+export function formatCountShortOnly(num: number): string {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M'
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K'
+  }
+  return String(num)
+}

src/view/shell/Drawer.tsx

@@ -2,6 +2,7 @@ import React, {ComponentProps} from 'react'
 import {
   Linking,
   SafeAreaView,
+  ScrollView,
   StyleProp,
   StyleSheet,
   TouchableOpacity,
@@ -41,7 +42,7 @@ import {getTabState, TabState} from 'lib/routes/helpers'
 import {NavigationProp} from 'lib/routes/types'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {isWeb} from 'platform/detection'
-import {formatCount} from 'view/com/util/numeric/format'
+import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
 
 export const DrawerContent = observer(() => {
   const theme = useTheme()
@@ -154,19 +155,18 @@ export const DrawerContent = observer(() => {
               type="xl"
               style={[pal.textLight, styles.profileCardFollowers]}>
               <Text type="xl-medium" style={pal.text}>
-                {formatCount(store.me.followersCount ?? 0)}
+                {formatCountShortOnly(store.me.followersCount ?? 0)}
               </Text>{' '}
               {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
               <Text type="xl-medium" style={pal.text}>
-                {formatCount(store.me.followsCount ?? 0)}
+                {formatCountShortOnly(store.me.followsCount ?? 0)}
               </Text>{' '}
               following
             </Text>
           </TouchableOpacity>
         </View>
         <InviteCodes />
-        <View style={s.flex1} />
-        <View style={styles.main}>
+        <ScrollView style={styles.main}>
           <MenuItem
             icon={
               isAtSearch ? (
@@ -292,8 +292,8 @@ export const DrawerContent = observer(() => {
             accessibilityHint=""
             onPress={onPressSettings}
           />
-        </View>
-        <View style={s.flex1} />
+          <View style={styles.smallSpacer} />
+        </ScrollView>
         <View style={styles.footer}>
           {!isWeb && (
             <TouchableOpacity
@@ -449,6 +449,10 @@ const styles = StyleSheet.create({
   },
   main: {
     paddingLeft: 20,
+    paddingTop: 20,
+  },
+  smallSpacer: {
+    height: 20,
   },
 
   profileCardDisplayName: {