improve drawer reflow for large text (#1464)

src/view/shell/Drawer.tsx

@@ -145,7 +145,8 @@ export const DrawerContent = observer(function DrawerContentImpl() {
         theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
       ]}>
       <SafeAreaView style={s.flex1}>
-        <View style={styles.main}>
+        <ScrollView style={styles.main}>
+          <View style={{}}>
             <TouchableOpacity
               testID="profileCardButton"
               accessibilityLabel="Profile"
@@ -178,8 +179,11 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               </Text>
             </TouchableOpacity>
           </View>
-        <InviteCodes />
+
-        <ScrollView style={styles.main}>
+          <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,