image: set max dimensions for chat and align to start, fix other usages

tloncorp · Jan 14, 2025 · 64e7fb3 · 64e7fb3
1 parent 57729d4
commit 64e7fb3
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}