fix blur on image alt text background (#10658)

.claude/.pre-pr-sweep-state

@@ -0,0 +1 @@
+alt-blur@3076a2b5a593b0d7b37198b5aebfe3a222afd52d

src/components/Lightbox/Lightbox.web.tsx

@@ -230,7 +230,11 @@ function LightboxGallery({
           style={[
             a.px_4xl,
             a.py_2xl,
-            {backgroundColor: 'rgba(0, 0, 0, 0.45)'},
+            {
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              // @ts-expect-error web only
+              backdropFilter: 'blur(16px)',
+            },
             delayedFadeInAnim,
           ]}>
           <Pressable

src/components/Lightbox/chrome/Footer.tsx

@@ -7,9 +7,10 @@ import {
   View,
 } from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {BlurView} from 'expo-blur'
 import {useLingui} from '@lingui/react/macro'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, platform, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
 type Props = {
@@ -37,36 +38,50 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
         {paddingBottom: insets.bottom + 8},
       ]}>
       <View style={[a.mx_md, styles.altWrap]}>
-        <ScrollView
+        <BlurView
-          scrollEnabled={isAltExpanded}
+          intensity={16}
-          onMomentumScrollBegin={() => {
+          tint="dark"
-            isMomentumScrolling.current = true
+          style={[
-          }}
+            // Tint kept over the blur so dense, text-heavy images stay
-          onMomentumScrollEnd={() => {
+            // readable. On Android the blur falls back to a flat overlay, so
-            isMomentumScrolling.current = false
+            // bump the opacity to keep the contrast the real blur provides
-          }}
+            // elsewhere.
-          contentContainerStyle={[a.px_md, a.py_sm]}>
+            platform({
-          <Pressable
+              ios: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
-            accessibilityRole="button"
+              android: {backgroundColor: 'rgba(0, 0, 0, 0.7)'},
-            accessibilityLabel={l`Expand alt text`}
+            }),
-            accessibilityHint=""
+          ]}>
-            onPress={() => {
+          <ScrollView
-              if (isMomentumScrolling.current) return
+            scrollEnabled={isAltExpanded}
-              LayoutAnimation.configureNext({
+            onMomentumScrollBegin={() => {
-                duration: 450,
+              isMomentumScrolling.current = true
-                update: {type: 'spring', springDamping: 1},
+            }}
-              })
+            onMomentumScrollEnd={() => {
-              onToggleAltExpanded()
+              isMomentumScrolling.current = false
-            }}>
+            }}
-            <Text
+            contentContainerStyle={[a.px_md, a.py_sm]}>
-              emoji
+            <Pressable
-              selectable
+              accessibilityRole="button"
-              style={[a.text_sm, {color: t.palette.white}]}
+              accessibilityLabel={l`Expand alt text`}
-              numberOfLines={isAltExpanded ? undefined : 3}>
+              accessibilityHint=""
-              {altText}
+              onPress={() => {
-            </Text>
+                if (isMomentumScrolling.current) return
-          </Pressable>
+                LayoutAnimation.configureNext({
-        </ScrollView>
+                  duration: 450,
+                  update: {type: 'spring', springDamping: 1},
+                })
+                onToggleAltExpanded()
+              }}>
+              <Text
+                emoji
+                selectable
+                style={[a.text_sm, {color: t.palette.white}]}
+                numberOfLines={isAltExpanded ? undefined : 3}>
+                {altText}
+              </Text>
+            </Pressable>
+          </ScrollView>
+        </BlurView>
       </View>
     </View>
   )
@@ -74,7 +89,6 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
 
 const styles = StyleSheet.create({
   altWrap: {
-    backgroundColor: 'rgba(0, 0, 0, 0.45)',
     borderRadius: 12,
     overflow: 'hidden',
   },