tweak image styles

src/view/com/util/images/AutoSizedImage.tsx

@@ -88,7 +88,7 @@ export function ConstrainedImage({
           <View
             style={[
               a.h_full,
-              a.rounded_sm,
+              a.rounded_md,
               a.overflow_hidden,
               t.atoms.bg_contrast_25,
               fullBleed ? a.w_full : {aspectRatio},
@@ -219,7 +219,7 @@ export function AutoSizedImage({
         accessibilityHint={_(msg`Tap to view full image`)}
         style={[
           a.w_full,
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           t.atoms.bg_contrast_25,
           {aspectRatio: max},

src/view/com/util/images/Gallery.tsx

@@ -47,7 +47,6 @@ export const GalleryItem: FC<GalleryItemProps> = ({
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
         style={[
           a.flex_1,
-          a.rounded_sm,
           a.overflow_hidden,
           t.atoms.bg_contrast_25,
           imageStyle,

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -26,10 +26,21 @@ export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
       ? a.gap_sm
       : a.gap_xs
   const count = props.images.length
-  const aspectRatio = count === 2 ? 2 : count === 3 ? 1.5 : 1
+  let aspectRatio = 1
+  switch (count) {
+    case 2:
+      aspectRatio = 2
+      break
+    case 3:
+      aspectRatio = 2
+      break
+    case 4:
+      aspectRatio = 1.5
+      break
+  }
   return (
     <View style={style}>
-      <View style={[gap, {aspectRatio}]}>
+      <View style={[gap, a.rounded_md, a.overflow_hidden, {aspectRatio}]}>
         <ImageLayoutGridInner {...props} gap={gap} />
       </View>
     </View>
@@ -65,14 +76,14 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
     case 3:
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
-          <View style={{flex: 2}}>
+          <View style={[a.flex_1]}>
             <GalleryItem {...props} index={0} />
           </View>
           <View style={[a.flex_1, gap]}>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
+            <View style={[a.flex_1]}>
               <GalleryItem {...props} index={1} />
             </View>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
+            <View style={[a.flex_1]}>
               <GalleryItem {...props} index={2} />
             </View>
           </View>
@@ -83,18 +94,18 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       return (
         <>
           <View style={[a.flex_row, gap]}>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
               <GalleryItem {...props} index={0} />
             </View>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
               <GalleryItem {...props} index={1} />
             </View>
           </View>
           <View style={[a.flex_row, gap]}>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
               <GalleryItem {...props} index={2} />
             </View>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
               <GalleryItem {...props} index={3} />
             </View>
           </View>