1 files changed, 44 insertions, 15 deletions
diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
index a4cbb3e29..81f1ca560 100644
--- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
+import {Image} from 'expo-image'
 import {Text} from '../text/Text'
-import {AutoSizedImage} from '../images/AutoSizedImage'
 import {StyleSheet, View} from 'react-native'
 import {usePalette} from 'lib/hooks/usePalette'
 import {AppBskyEmbedExternal} from '@atproto/api'
+import {isDesktopWeb} from 'platform/detection'
+import {toNiceDomain} from 'lib/strings/url-helpers'
 
 export const ExternalLinkEmbed = ({
   link,
@@ -14,44 +16,71 @@ export const ExternalLinkEmbed = ({
 }) => {
   const pal = usePalette('default')
   return (
-    <>
+    <View style={styles.extContainer}>
       {link.thumb ? (
-        <AutoSizedImage uri={link.thumb} style={styles.extImage}>
+        <View style={styles.extImageContainer}>
+          <Image
+            style={styles.extImage}
+            source={{uri: link.thumb}}
+            accessibilityIgnoresInvertColors
+          />
           {imageChild}
-        </AutoSizedImage>
+        </View>
       ) : undefined}
       <View style={styles.extInner}>
-        <Text type="md-bold" numberOfLines={2} style={[pal.text]}>
-          {link.title || link.uri}
-        </Text>
         <Text
           type="sm"
           numberOfLines={1}
           style={[pal.textLight, styles.extUri]}>
-          {link.uri}
+          {toNiceDomain(link.uri)}
+        </Text>
+        <Text
+          type="lg-bold"
+          numberOfLines={isDesktopWeb ? 2 : 4}
+          style={[pal.text]}>
+          {link.title || link.uri}
         </Text>
         {link.description ? (
           <Text
-            type="sm"
-            numberOfLines={2}
+            type="md"
+            numberOfLines={isDesktopWeb ? 2 : 4}
             style={[pal.text, styles.extDescription]}>
             {link.description}
           </Text>
         ) : undefined}
       </View>
-    </>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
+  extContainer: {
+    flexDirection: isDesktopWeb ? 'row' : 'column',
+  },
   extInner: {
-    padding: 10,
+    paddingHorizontal: isDesktopWeb ? 14 : 10,
+    paddingTop: 8,
+    paddingBottom: 10,
+    flex: isDesktopWeb ? 1 : undefined,
   },
+  extImageContainer: isDesktopWeb
+    ? {
+        borderTopLeftRadius: 6,
+        borderBottomLeftRadius: 6,
+        width: 120,
+        aspectRatio: 1,
+        overflow: 'hidden',
+      }
+    : {
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
+        width: '100%',
+        height: 200,
+        overflow: 'hidden',
+      },
   extImage: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
     width: '100%',
-    maxHeight: 200,
+    height: 200,
   },
   extUri: {
     marginTop: 2,