improve drawer reflow for large text (#1464)

1 files changed, 47 insertions, 37 deletions

diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 67092938e..3a4b8947a 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -145,41 +145,45 @@ export const DrawerContent = observer(function DrawerContentImpl() {
         theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
       ]}>
       <SafeAreaView style={s.flex1}>
-        <View style={styles.main}>
-          <TouchableOpacity
-            testID="profileCardButton"
-            accessibilityLabel="Profile"
-            accessibilityHint="Navigates to your profile"
-            onPress={onPressProfile}>
-            <UserAvatar size={80} avatar={store.me.avatar} />
-            <Text
-              type="title-lg"
-              style={[pal.text, s.bold, styles.profileCardDisplayName]}
-              numberOfLines={1}>
-              {store.me.displayName || store.me.handle}
-            </Text>
-            <Text
-              type="2xl"
-              style={[pal.textLight, styles.profileCardHandle]}
-              numberOfLines={1}>
-              @{store.me.handle}
-            </Text>
-            <Text
-              type="xl"
-              style={[pal.textLight, styles.profileCardFollowers]}>
-              <Text type="xl-medium" style={pal.text}>
-                {formatCountShortOnly(store.me.followersCount ?? 0)}
-              </Text>{' '}
-              {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
-              <Text type="xl-medium" style={pal.text}>
-                {formatCountShortOnly(store.me.followsCount ?? 0)}
-              </Text>{' '}
-              following
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <InviteCodes />
         <ScrollView style={styles.main}>
+          <View style={{}}>
+            <TouchableOpacity
+              testID="profileCardButton"
+              accessibilityLabel="Profile"
+              accessibilityHint="Navigates to your profile"
+              onPress={onPressProfile}>
+              <UserAvatar size={80} avatar={store.me.avatar} />
+              <Text
+                type="title-lg"
+                style={[pal.text, s.bold, styles.profileCardDisplayName]}
+                numberOfLines={1}>
+                {store.me.displayName || store.me.handle}
+              </Text>
+              <Text
+                type="2xl"
+                style={[pal.textLight, styles.profileCardHandle]}
+                numberOfLines={1}>
+                @{store.me.handle}
+              </Text>
+              <Text
+                type="xl"
+                style={[pal.textLight, styles.profileCardFollowers]}>
+                <Text type="xl-medium" style={pal.text}>
+                  {formatCountShortOnly(store.me.followersCount ?? 0)}
+                </Text>{' '}
+                {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
+                <Text type="xl-medium" style={pal.text}>
+                  {formatCountShortOnly(store.me.followsCount ?? 0)}
+                </Text>{' '}
+                following
+              </Text>
+            </TouchableOpacity>
+          </View>
+
+          <InviteCodes style={{paddingLeft: 0}} />
+
+          <View style={{height: 10}} />
+
           <MenuItem
             icon={
               isAtSearch ? (
@@ -313,6 +317,8 @@ export const DrawerContent = observer(function DrawerContentImpl() {
             accessibilityHint=""
             onPress={onPressSettings}
           />
+
+          <View style={styles.smallSpacer} />
           <View style={styles.smallSpacer} />
         </ScrollView>
         <View style={styles.footer}>
@@ -405,7 +411,11 @@ function MenuItem({
   )
 }
 
-const InviteCodes = observer(function InviteCodesImpl() {
+const InviteCodes = observer(function InviteCodesImpl({
+  style,
+}: {
+  style?: StyleProp<ViewStyle>
+}) {
   const {track} = useAnalytics()
   const store = useStores()
   const pal = usePalette('default')
@@ -418,7 +428,7 @@ const InviteCodes = observer(function InviteCodesImpl() {
   return (
     <TouchableOpacity
       testID="menuItemInviteCodes"
-      style={[styles.inviteCodes]}
+      style={[styles.inviteCodes, style]}
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={
@@ -448,7 +458,6 @@ const InviteCodes = observer(function InviteCodesImpl() {
 const styles = StyleSheet.create({
   view: {
     flex: 1,
-    paddingTop: 20,
     paddingBottom: 50,
     maxWidth: 300,
   },
@@ -524,6 +533,7 @@ const styles = StyleSheet.create({
   },
 
   footer: {
+    flexWrap: 'wrap',
     flexDirection: 'row',
     gap: 8,
     paddingRight: 20,