Fix draft image pres with 4+ images (#10765)

src/components/MediaPreview.tsx

@@ -127,10 +127,12 @@ export function ImageItem({
   thumbnail,
   alt,
   children,
+  maxWidth = 100,
 }: {
   thumbnail?: string
   alt?: string
   children?: React.ReactNode
+  maxWidth?: number
 }) {
   const t = useTheme()
 
@@ -141,7 +143,7 @@ export function ImageItem({
           {backgroundColor: 'black'},
           a.flex_1,
           a.aspect_square,
-          {maxWidth: 100},
+          {maxWidth},
           a.rounded_xs,
         ]}
         accessibilityLabel={alt}
@@ -152,7 +154,7 @@ export function ImageItem({
   }
 
   return (
-    <View style={[a.relative, a.flex_1, a.aspect_square, {maxWidth: 100}]}>
+    <View style={[a.relative, a.flex_1, a.aspect_square, {maxWidth}]}>
       <Image
         key={thumbnail}
         source={{uri: thumbnail}}

src/view/com/composer/drafts/DraftItem.tsx

@@ -326,9 +326,15 @@ function DraftMediaPreview({post}: {post: DraftPostDisplay}) {
   }
 
   return (
-    <MediaPreview.Outer>
+    <View style={[a.flex_row, a.flex_wrap, {marginLeft: -4, marginRight: -4}]}>
       {loadedImages.map((image, i) => (
-        <MediaPreview.ImageItem key={i} thumbnail={image.url} alt={image.alt} />
+        <View key={i} style={[a.p_2xs, {width: '20%'}]}>
+          <MediaPreview.ImageItem
+            thumbnail={image.url}
+            alt={image.alt}
+            maxWidth={999}
+          />
+        </View>
       ))}
       {post.gif && (
         <MediaPreview.GifItem thumbnail={post.gif.url} alt={post.gif.alt} />
@@ -339,6 +345,6 @@ function DraftMediaPreview({post}: {post: DraftPostDisplay}) {
           alt={post.video.altText}
         />
       )}
-    </MediaPreview.Outer>
+    </View>
   )
 }