fix blur on image alt text background (#10658)

(cherry picked from commit 0a7c087078)

.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,6 +38,19 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
         {paddingBottom: insets.bottom + 8},
       ]}>
       <View style={[a.mx_md, styles.altWrap]}>
+        <BlurView
+          intensity={16}
+          tint="dark"
+          style={[
+            // Tint kept over the blur so dense, text-heavy images stay
+            // readable. On Android the blur falls back to a flat overlay, so
+            // bump the opacity to keep the contrast the real blur provides
+            // elsewhere.
+            platform({
+              ios: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
+              android: {backgroundColor: 'rgba(0, 0, 0, 0.7)'},
+            }),
+          ]}>
           <ScrollView
             scrollEnabled={isAltExpanded}
             onMomentumScrollBegin={() => {
@@ -67,6 +81,7 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
               </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',
   },