1 files changed, 25 insertions, 8 deletions
diff --git a/src/components/dms/MessageItemEmbed.tsx b/src/components/dms/MessageItemEmbed.tsx
index f9eb4d3af..f1c6189d0 100644
--- a/src/components/dms/MessageItemEmbed.tsx
+++ b/src/components/dms/MessageItemEmbed.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import {View} from 'react-native'
+import {useWindowDimensions, View} from 'react-native'
 import {AppBskyEmbedRecord} from '@atproto/api'
 
 import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
-import {atoms as a, native, useTheme} from '#/alf'
+import {atoms as a, native, tokens, useTheme, web} from '#/alf'
 import {MessageContextProvider} from './MessageContext'
 
 let MessageItemEmbed = ({
@@ -12,15 +12,32 @@ let MessageItemEmbed = ({
   embed: AppBskyEmbedRecord.View
 }): React.ReactNode => {
   const t = useTheme()
+  const screen = useWindowDimensions()
 
   return (
     <MessageContextProvider>
-      <View style={[a.my_xs, t.atoms.bg, native({flexBasis: 0})]}>
-        <PostEmbeds
-          embed={embed}
-          allowNestedQuotes
-          viewContext={PostEmbedViewContext.Feed}
-        />
+      <View
+        style={[
+          a.my_xs,
+          t.atoms.bg,
+          a.rounded_md,
+          native({
+            flexBasis: 0,
+            width: Math.min(screen.width, 600) / 1.4,
+          }),
+          web({
+            width: '100%',
+            minWidth: 280,
+            maxWidth: 360,
+          }),
+        ]}>
+        <View style={{marginTop: tokens.space.sm * -1}}>
+          <PostEmbeds
+            embed={embed}
+            allowNestedQuotes
+            viewContext={PostEmbedViewContext.Feed}
+          />
+        </View>
       </View>
     </MessageContextProvider>
   )