From df740c85e0539cc6823f592baa52003d1676f7d8 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 30 Jan 2024 16:37:26 -0800
Subject: use gap on native

---
 src/view/com/util/images/ImageLayoutGrid.tsx | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

(limited to 'src/view/com/util/images/ImageLayoutGrid.tsx')

diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index 23e807b6a..70122f67f 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 (
         <View style={styles.flexRow}>
-          <View style={{flex: 2, aspectRatio: 1}}>
+          <View style={{flex: 2, aspectRatio: isWeb ? 1 : undefined}}>
             <GalleryItem {...props} index={0} imageStyle={styles.image} />
           </View>
-          <View style={{flex: 1}}>
+          <View style={{flex: 1, gap: !isWeb ? 5 : undefined}}>
             <View style={styles.smallItem}>
               <GalleryItem {...props} index={1} imageStyle={styles.image} />
             </View>
@@ -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,
+      }
+    : {},
 })
-- 
cgit 1.4.1