From 64e7fb3e32c54c19f9989c329d0498aaeb3f59e5 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@hmiller.dev>
Date: Tue, 14 Jan 2025 10:42:37 -0600
Subject: [PATCH] image: set max dimensions for chat and align to start, fix
 other usages

---
 packages/ui/src/components/ChatMessage/ChatMessage.tsx | 10 ++++++++++
 packages/ui/src/components/Image.tsx                   |  2 +-
 .../ui/src/components/NotebookPost/NotebookPost.tsx    |  1 +
 .../ui/src/components/PostContent/BlockRenderer.tsx    |  2 +-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/ChatMessage/ChatMessage.tsx b/packages/ui/src/components/ChatMessage/ChatMessage.tsx
index d564612d5a..97be4e8acc 100644
--- a/packages/ui/src/components/ChatMessage/ChatMessage.tsx
+++ b/packages/ui/src/components/ChatMessage/ChatMessage.tsx
@@ -241,6 +241,16 @@ const ChatContentRenderer = createContentRenderer({
     reference: {
       contentSize: '$l',
     },
+    image: {
+      alignItems: 'flex-start',
+      imageProps: {
+        maxWidth: 600,
+        maxHeight: 600,
+        height: 'auto',
+        width: 'auto',
+        objectFit: 'contain',
+      },
+    },
   },
 });
 
diff --git a/packages/ui/src/components/Image.tsx b/packages/ui/src/components/Image.tsx
index f9be0305ff..058a5abb50 100644
--- a/packages/ui/src/components/Image.tsx
+++ b/packages/ui/src/components/Image.tsx
@@ -60,10 +60,10 @@ const WebImage = ({
       src={source.uri}
       alt={alt}
       style={{
-        ...StyleSheet.flatten(style),
         maxWidth: '100%',
         height: props.height ? props.height : '100%',
         objectFit: contentFit ? contentFit : undefined,
+        ...StyleSheet.flatten(style),
       }}
       onLoad={handleLoad}
       onError={handleError}
diff --git a/packages/ui/src/components/NotebookPost/NotebookPost.tsx b/packages/ui/src/components/NotebookPost/NotebookPost.tsx
index 96f5c427e1..4393347368 100644
--- a/packages/ui/src/components/NotebookPost/NotebookPost.tsx
+++ b/packages/ui/src/components/NotebookPost/NotebookPost.tsx
@@ -312,6 +312,7 @@ export const NotebookPostHeroImage = styled(Image, {
   width: '100%',
   height: IMAGE_HEIGHT,
   borderRadius: '$s',
+  objectFit: 'cover',
   variants: {
     size: {
       $s: {
diff --git a/packages/ui/src/components/PostContent/BlockRenderer.tsx b/packages/ui/src/components/PostContent/BlockRenderer.tsx
index a351a44a42..936c897f27 100644
--- a/packages/ui/src/components/PostContent/BlockRenderer.tsx
+++ b/packages/ui/src/components/PostContent/BlockRenderer.tsx
@@ -250,7 +250,6 @@ export function ImageBlock({
 
   return (
     <Pressable
-      borderRadius="$s"
       overflow="hidden"
       onPress={handlePress}
       onLongPress={onLongPress}
@@ -265,6 +264,7 @@ export function ImageBlock({
             ? { aspectRatio: dimensions.aspect || undefined }
             : {}),
         }}
+        borderRadius="$s"
         alt={block.alt}
         onLoad={handleImageLoaded}
         {...imageProps}