diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index e7110372..6b54ec09 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -4,6 +4,7 @@ import {StyleSheet, Text, Pressable, View} from 'react-native' import {Image} from 'expo-image' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {isWeb} from 'platform/detection' type EventFunction = (index: number) => void @@ -70,8 +71,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 6, paddingVertical: 3, position: 'absolute', - left: 8, - bottom: 8, + left: isWeb ? 8 : 5, + bottom: isWeb ? 8 : 5, }, alt: { color: 'white', diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 23e807b6..70122f67 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -2,6 +2,7 @@ import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {AppBskyEmbedImages} from '@atproto/api' import {GalleryItem} from './Gallery' +import {isWeb} from 'platform/detection' interface ImageLayoutGridProps { images: AppBskyEmbedImages.ViewImage[] @@ -47,10 +48,10 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { case 3: return ( - + - + @@ -93,13 +94,19 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { const IMAGE_GAP = 5 const styles = StyleSheet.create({ - container: { - marginHorizontal: -IMAGE_GAP / 2, - marginVertical: -IMAGE_GAP / 2, - }, - flexRow: {flexDirection: 'row'}, + container: isWeb + ? { + marginHorizontal: -IMAGE_GAP / 2, + marginVertical: -IMAGE_GAP / 2, + } + : { + gap: IMAGE_GAP, + }, + flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined}, smallItem: {flex: 1, aspectRatio: 1}, - image: { - margin: IMAGE_GAP / 2, - }, + image: isWeb + ? { + margin: IMAGE_GAP / 2, + } + : {}, })