Move the alt text indicator off of the images

src/view/com/util/images/Gallery.tsx

@@ -1,6 +1,6 @@
 import {AppBskyEmbedImages} from '@atproto/api'
 import React, {ComponentProps, FC} from 'react'
-import {StyleSheet, Text, Pressable, View} from 'react-native'
+import {StyleSheet, Pressable, View} from 'react-native'
 import {Image} from 'expo-image'
 
 type EventFunction = (index: number) => void
@@ -42,13 +42,6 @@ export const GalleryItem: FC<GalleryItemProps> = ({
           accessibilityIgnoresInvertColors
         />
       </Pressable>
-      {image.alt === '' ? null : (
-        <View style={styles.altContainer}>
-          <Text style={styles.alt} accessible={false}>
-            ALT
-          </Text>
-        </View>
-      )}
     </View>
   )
 }
@@ -61,18 +54,4 @@ const styles = StyleSheet.create({
     flex: 1,
     borderRadius: 4,
   },
-  altContainer: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    borderRadius: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    position: 'absolute',
-    left: 8,
-    bottom: 8,
-  },
-  alt: {
-    color: 'white',
-    fontSize: 10,
-    fontWeight: 'bold',
-  },
 })

src/view/com/util/post-embeds/index.tsx

@@ -6,6 +6,7 @@ import {
   ViewStyle,
   Text,
   InteractionManager,
+  Pressable,
 } from 'react-native'
 import {Image} from 'expo-image'
 import {
@@ -122,18 +123,20 @@ export function PostEmbeds({
               dimensionsHint={aspectRatio}
               onPress={() => _openLightbox(0)}
               onPressIn={() => onPressIn(0)}
-              style={[
+              style={[styles.singleImage, isMobile && styles.singleImageMobile]}
-                styles.singleImage,
+            />
-                isMobile && styles.singleImageMobile,
+            {alt === '' ? null : (
-              ]}>
+              <View style={{flexDirection: 'row', marginTop: 4}}>
-              {alt === '' ? null : (
+                <Pressable
-                <View style={styles.altContainer}>
+                  style={[styles.altContainer, pal.viewLight]}
-                  <Text style={styles.alt} accessible={false}>
+                  accessibilityRole="button"
+                  onPress={() => _openLightbox(0)}>
+                  <Text style={[styles.alt, pal.textLight]} accessible={false}>
                     ALT
                   </Text>
-                </View>
+                </Pressable>
-              )}
+              </View>
-            </AutoSizedImage>
+            )}
           </View>
         )
       }
@@ -150,6 +153,18 @@ export function PostEmbeds({
                 : undefined
             }
           />
+          {embed.images.find(img => img.alt !== '') ? (
+            <View style={{flexDirection: 'row', marginTop: 4}}>
+              <Pressable
+                style={[styles.altContainer, pal.viewLight]}
+                accessibilityRole="button"
+                onPress={() => _openLightbox(0)}>
+                <Text style={[styles.alt, pal.textLight]} accessible={false}>
+                  ALT
+                </Text>
+              </Pressable>
+            </View>
+          ) : null}
         </View>
       )
     }
@@ -198,16 +213,11 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   altContainer: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    borderRadius: 8,
-    borderRadius: 6,
     paddingHorizontal: 6,
     paddingVertical: 3,
-    position: 'absolute',
-    left: 6,
-    bottom: 6,
   },
   alt: {
-    color: 'white',
     fontSize: 10,
     fontWeight: 'bold',
   },