3 files changed, 45 insertions, 6 deletions

diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx
index 5156511d6..7671c29c8 100644
--- a/src/view/com/modals/AltImage.tsx
+++ b/src/view/com/modals/AltImage.tsx
@@ -4,7 +4,9 @@ import {
   StyleSheet,
   TouchableOpacity,
   View,
+  TextInput as RNTextInput,
   useWindowDimensions,
+  ScrollView as RNScrollView,
 } from 'react-native'
 import {ScrollView, TextInput} from './util'
 import {Image} from 'expo-image'
@@ -13,6 +15,7 @@ import {gradients, s} from 'lib/styles'
 import {enforceLen} from 'lib/strings/helpers'
 import {MAX_ALT_TEXT} from 'lib/constants'
 import {useTheme} from 'lib/ThemeContext'
+import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {Text} from '../util/text/Text'
 import LinearGradient from 'react-native-linear-gradient'
 import {isWeb} from 'platform/detection'
@@ -34,6 +37,24 @@ export function Component({image}: Props) {
   const [altText, setAltText] = useState(image.altText)
   const windim = useWindowDimensions()
   const {closeModal} = useModalControls()
+  const inputRef = React.useRef<RNTextInput>(null)
+  const scrollViewRef = React.useRef<RNScrollView>(null)
+  const keyboardShown = useIsKeyboardVisible()
+
+  // Autofocus hack when we open the modal. We have to wait for the animation to complete first
+  React.useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus()
+    }, 500)
+  }, [])
+
+  // We'd rather be at the bottom here so that we can easily dismiss the modal instead of having to scroll
+  // (especially on android, it acts weird)
+  React.useEffect(() => {
+    if (keyboardShown[0]) {
+      scrollViewRef.current?.scrollToEnd()
+    }
+  }, [keyboardShown])
 
   const imageStyles = useMemo<ImageStyle>(() => {
     const maxWidth = isWeb ? 450 : windim.width
@@ -71,6 +92,7 @@ export function Component({image}: Props) {
       testID="altTextImageModal"
       style={[pal.view, styles.scrollContainer]}
       keyboardShouldPersistTaps="always"
+      ref={scrollViewRef}
       nativeID="imageAltText">
       <View style={styles.scrollInner}>
         <View style={[pal.viewLight, styles.imageContainer]}>
@@ -97,7 +119,8 @@ export function Component({image}: Props) {
           accessibilityLabel={_(msg`Image alt text`)}
           accessibilityHint=""
           accessibilityLabelledBy="imageAltText"
-          autoFocus
+          // @ts-ignore This is fine, type is weird on the BottomSheetTextInput
+          ref={inputRef}
         />
         <View style={styles.buttonControls}>
           <TouchableOpacity
diff --git a/src/view/com/modals/ProfilePreview.tsx b/src/view/com/modals/ProfilePreview.tsx
index 77e68db70..88b0df71d 100644
--- a/src/view/com/modals/ProfilePreview.tsx
+++ b/src/view/com/modals/ProfilePreview.tsx
@@ -27,12 +27,12 @@ export function Component({did}: {did: string}) {
     data: profile,
     error: profileError,
     refetch: refetchProfile,
-    isFetching: isFetchingProfile,
+    isLoading: isLoadingProfile,
   } = useProfileQuery({
     did: did,
   })
 
-  if (isFetchingProfile || !moderationOpts) {
+  if (isLoadingProfile || !moderationOpts) {
     return (
       <CenteredView style={[pal.view, s.flex1]}>
         <ProfileHeader
diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx
index 23adbe1a8..8452f2513 100644
--- a/src/view/com/modals/UserAddRemoveLists.tsx
+++ b/src/view/com/modals/UserAddRemoveLists.tsx
@@ -1,5 +1,10 @@
 import React, {useCallback} from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {Text} from '../util/text/Text'
 import {UserAvatar} from '../util/UserAvatar'
@@ -10,7 +15,7 @@ import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isWeb, isAndroid} from 'platform/detection'
+import {isWeb, isAndroid, isMobileWeb} from 'platform/detection'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
@@ -41,6 +46,7 @@ export function Component({
 }) {
   const {closeModal} = useModalControls()
   const pal = usePalette('default')
+  const {height: screenHeight} = useWindowDimensions()
   const {_} = useLingui()
   const {data: memberships} = useDangerousListMembershipsQuery()
 
@@ -48,6 +54,16 @@ export function Component({
     closeModal()
   }, [closeModal])
 
+  const listStyle = React.useMemo(() => {
+    if (isMobileWeb) {
+      return [pal.border, {height: screenHeight / 2}]
+    } else if (isWeb) {
+      return [pal.border, {height: screenHeight / 1.5}]
+    }
+
+    return [pal.border, {flex: 1}]
+  }, [pal.border, screenHeight])
+
   return (
     <View testID="userAddRemoveListsModal" style={s.hContentRegion}>
       <Text style={[styles.title, pal.text]}>
@@ -68,7 +84,7 @@ export function Component({
             onRemove={onRemove}
           />
         )}
-        style={[styles.list, pal.border]}
+        style={listStyle}
       />
       <View style={[styles.btns, pal.border]}>
         <Button