From 79a2f8d5280230a125b42c60bbb5b9e4be4f9109 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 20 Sep 2024 20:47:28 +0100
Subject: [PATCH] Increase rounding for all embeds (#5421)

* tweak image styles

* fix reply image preview and covert to atoms

* increase rounding on media inset border

* decrease gap on desktop

* fix inset styles

* increase rounding on embeds to `md`

* Couple edge cases

---------

Co-authored-by: Eric Bailey <git@esb.lol>
---
 src/components/MediaInsetBorder.tsx           |   2 +-
 src/view/com/composer/ComposerReplyTo.tsx     | 157 ++++++++----------
 src/view/com/util/images/AutoSizedImage.tsx   |   4 +-
 src/view/com/util/images/Gallery.tsx          |  19 ++-
 src/view/com/util/images/ImageLayoutGrid.tsx  | 130 ++++++++++++---
 .../com/util/post-embeds/ExternalGifEmbed.tsx |   2 +-
 .../util/post-embeds/ExternalLinkEmbed.tsx    |  12 +-
 .../util/post-embeds/ExternalPlayerEmbed.tsx  |  14 +-
 src/view/com/util/post-embeds/GifEmbed.tsx    |   8 +-
 src/view/com/util/post-embeds/QuoteEmbed.tsx  |  16 +-
 src/view/com/util/post-embeds/VideoEmbed.tsx  |   4 +-
 .../com/util/post-embeds/VideoEmbed.web.tsx   |   4 +-
 .../VideoEmbedInner/VideoEmbedInnerWeb.tsx    |   2 +-
 src/view/com/util/post-embeds/index.tsx       |   9 +-
 14 files changed, 223 insertions(+), 160 deletions(-)

diff --git a/src/components/MediaInsetBorder.tsx b/src/components/MediaInsetBorder.tsx
index ef8b00e2e0..ed89880f40 100644
--- a/src/components/MediaInsetBorder.tsx
+++ b/src/components/MediaInsetBorder.tsx
@@ -24,7 +24,7 @@ export function MediaInsetBorder({
   return (
     <Fill
       style={[
-        a.rounded_sm,
+        a.rounded_md,
         a.border,
         opaque
           ? [t.atoms.border_contrast_low]
diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx
index d4ba1f3a86..74ca615070 100644
--- a/src/view/com/composer/ComposerReplyTo.tsx
+++ b/src/view/com/composer/ComposerReplyTo.tsx
@@ -16,7 +16,7 @@ import {ComposerOptsPostRef} from 'state/shell/composer'
 import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed'
 import {Text} from 'view/com/util/text/Text'
 import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
-import {useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 
 export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
   const t = useTheme()
@@ -122,94 +122,87 @@ function ComposerReplyToImages({
   showFull: boolean
 }) {
   return (
-    <View
-      style={{
-        width: 65,
-        flexDirection: 'column',
-        alignItems: 'center',
-      }}>
-      <View style={styles.imagesContainer}>
-        {(images.length === 1 && (
-          <Image
-            source={{uri: images[0].thumb}}
-            style={styles.singleImage}
-            cachePolicy="memory-disk"
-            accessibilityIgnoresInvertColors
-          />
+    <View style={[styles.imagesContainer, a.mx_xs]}>
+      {(images.length === 1 && (
+        <Image
+          source={{uri: images[0].thumb}}
+          style={[a.flex_1]}
+          cachePolicy="memory-disk"
+          accessibilityIgnoresInvertColors
+        />
+      )) ||
+        (images.length === 2 && (
+          <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
+            <Image
+              source={{uri: images[0].thumb}}
+              style={[a.flex_1]}
+              cachePolicy="memory-disk"
+              accessibilityIgnoresInvertColors
+            />
+            <Image
+              source={{uri: images[1].thumb}}
+              style={[a.flex_1]}
+              cachePolicy="memory-disk"
+              accessibilityIgnoresInvertColors
+            />
+          </View>
         )) ||
-          (images.length === 2 && (
-            <View style={[styles.imagesInner, styles.imagesRow]}>
+        (images.length === 3 && (
+          <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
+            <Image
+              source={{uri: images[0].thumb}}
+              style={[a.flex_1]}
+              cachePolicy="memory-disk"
+              accessibilityIgnoresInvertColors
+            />
+            <View style={[a.flex_1, a.gap_2xs]}>
               <Image
-                source={{uri: images[0].thumb}}
-                style={styles.doubleImageTall}
+                source={{uri: images[1].thumb}}
+                style={[a.flex_1]}
                 cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
               />
               <Image
-                source={{uri: images[1].thumb}}
-                style={styles.doubleImageTall}
+                source={{uri: images[2].thumb}}
+                style={[a.flex_1]}
                 cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
               />
             </View>
-          )) ||
-          (images.length === 3 && (
-            <View style={[styles.imagesInner, styles.imagesRow]}>
+          </View>
+        )) ||
+        (images.length === 4 && (
+          <View style={[a.flex_1, a.gap_2xs]}>
+            <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
               <Image
                 source={{uri: images[0].thumb}}
-                style={styles.doubleImageTall}
+                style={[a.flex_1]}
+                cachePolicy="memory-disk"
+                accessibilityIgnoresInvertColors
+              />
+              <Image
+                source={{uri: images[1].thumb}}
+                style={[a.flex_1]}
                 cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
               />
-              <View style={styles.imagesInner}>
-                <Image
-                  source={{uri: images[1].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-                <Image
-                  source={{uri: images[2].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-              </View>
             </View>
-          )) ||
-          (images.length === 4 && (
-            <View style={styles.imagesInner}>
-              <View style={[styles.imagesInner, styles.imagesRow]}>
-                <Image
-                  source={{uri: images[0].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-                <Image
-                  source={{uri: images[1].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-              </View>
-              <View style={[styles.imagesInner, styles.imagesRow]}>
-                <Image
-                  source={{uri: images[2].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-                <Image
-                  source={{uri: images[3].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-              </View>
+            <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
+              <Image
+                source={{uri: images[2].thumb}}
+                style={[a.flex_1]}
+                cachePolicy="memory-disk"
+                accessibilityIgnoresInvertColors
+              />
+              <Image
+                source={{uri: images[3].thumb}}
+                style={[a.flex_1]}
+                cachePolicy="memory-disk"
+                accessibilityIgnoresInvertColors
+              />
             </View>
-          ))}
-      </View>
+          </View>
+        ))}
     </View>
   )
 }
@@ -240,23 +233,7 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     overflow: 'hidden',
     marginTop: 2,
-  },
-  imagesInner: {
-    gap: 2,
-  },
-  imagesRow: {
-    flexDirection: 'row',
-  },
-  singleImage: {
-    width: 65,
-    height: 65,
-  },
-  doubleImageTall: {
-    width: 32.5,
-    height: 65,
-  },
-  doubleImage: {
-    width: 32.5,
-    height: 32.5,
+    height: 64,
+    width: 64,
   },
 })
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 9abbe2875f..a9bfc1c966 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/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},
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx
index 38137cc49f..e277b7e86a 100644
--- a/src/view/com/util/images/Gallery.tsx
+++ b/src/view/com/util/images/Gallery.tsx
@@ -1,6 +1,6 @@
-import React, {ComponentProps, FC} from 'react'
-import {Pressable, View} from 'react-native'
-import {Image} from 'expo-image'
+import React from 'react'
+import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {Image, ImageStyle} from 'expo-image'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -13,17 +13,18 @@ import {Text} from '#/components/Typography'
 
 type EventFunction = (index: number) => void
 
-interface GalleryItemProps {
+interface Props {
   images: AppBskyEmbedImages.ViewImage[]
   index: number
   onPress?: EventFunction
   onLongPress?: EventFunction
   onPressIn?: EventFunction
-  imageStyle?: ComponentProps<typeof Image>['style']
+  imageStyle?: StyleProp<ImageStyle>
   viewContext?: PostEmbedViewContext
+  insetBorderStyle?: StyleProp<ViewStyle>
 }
 
-export const GalleryItem: FC<GalleryItemProps> = ({
+export function GalleryItem({
   images,
   index,
   imageStyle,
@@ -31,7 +32,8 @@ export const GalleryItem: FC<GalleryItemProps> = ({
   onPressIn,
   onLongPress,
   viewContext,
-}) => {
+  insetBorderStyle,
+}: Props) {
   const t = useTheme()
   const {_} = useLingui()
   const largeAltBadge = useLargeAltBadgeEnabled()
@@ -47,7 +49,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,
@@ -63,7 +64,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
           accessibilityHint=""
           accessibilityIgnoresInvertColors
         />
-        <MediaInsetBorder />
+        <MediaInsetBorder style={insetBorderStyle} />
       </Pressable>
       {hasAlt && !hideBadges ? (
         <View
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index 45da7f076d..1aaf166ff2 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {AppBskyEmbedImages} from '@atproto/api'
 
 import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
@@ -22,14 +22,23 @@ export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
       ? gtMobile
         ? a.gap_xs
         : a.gap_2xs
-      : gtMobile
-      ? a.gap_sm
       : a.gap_xs
   const count = props.images.length
-  const aspectRatio = count === 2 ? 2 : count === 3 ? 1.5 : 1
+  let aspectRatio
+  switch (count) {
+    case 2:
+      aspectRatio = 2
+      break
+    case 3:
+      aspectRatio = 2
+      break
+    case 4:
+      aspectRatio = undefined
+      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>
@@ -54,10 +63,18 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
           <View style={[a.flex_1, {aspectRatio: 1}]}>
-            <GalleryItem {...props} index={0} />
+            <GalleryItem
+              {...props}
+              index={0}
+              insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
+            />
           </View>
           <View style={[a.flex_1, {aspectRatio: 1}]}>
-            <GalleryItem {...props} index={1} />
+            <GalleryItem
+              {...props}
+              index={1}
+              insetBorderStyle={noCorners(['topLeft', 'bottomLeft'])}
+            />
           </View>
         </View>
       )
@@ -65,15 +82,35 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
     case 3:
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
-          <View style={{flex: 2}}>
-            <GalleryItem {...props} index={0} />
+          <View style={[a.flex_1]}>
+            <GalleryItem
+              {...props}
+              index={0}
+              insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
+            />
           </View>
           <View style={[a.flex_1, gap]}>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
-              <GalleryItem {...props} index={1} />
+            <View style={[a.flex_1]}>
+              <GalleryItem
+                {...props}
+                index={1}
+                insetBorderStyle={noCorners([
+                  'topLeft',
+                  'bottomLeft',
+                  'bottomRight',
+                ])}
+              />
             </View>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
-              <GalleryItem {...props} index={2} />
+            <View style={[a.flex_1]}>
+              <GalleryItem
+                {...props}
+                index={2}
+                insetBorderStyle={noCorners([
+                  'topLeft',
+                  'bottomLeft',
+                  'topRight',
+                ])}
+              />
             </View>
           </View>
         </View>
@@ -83,19 +120,51 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       return (
         <>
           <View style={[a.flex_row, gap]}>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
-              <GalleryItem {...props} index={0} />
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
+              <GalleryItem
+                {...props}
+                index={0}
+                insetBorderStyle={noCorners([
+                  'bottomLeft',
+                  'topRight',
+                  'bottomRight',
+                ])}
+              />
             </View>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
-              <GalleryItem {...props} index={1} />
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
+              <GalleryItem
+                {...props}
+                index={1}
+                insetBorderStyle={noCorners([
+                  'topLeft',
+                  'bottomLeft',
+                  'bottomRight',
+                ])}
+              />
             </View>
           </View>
           <View style={[a.flex_row, gap]}>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
-              <GalleryItem {...props} index={2} />
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
+              <GalleryItem
+                {...props}
+                index={2}
+                insetBorderStyle={noCorners([
+                  'topLeft',
+                  'topRight',
+                  'bottomRight',
+                ])}
+              />
             </View>
-            <View style={[a.flex_1, {aspectRatio: 1}]}>
-              <GalleryItem {...props} index={3} />
+            <View style={[a.flex_1, {aspectRatio: 1.5}]}>
+              <GalleryItem
+                {...props}
+                index={3}
+                insetBorderStyle={noCorners([
+                  'topLeft',
+                  'bottomLeft',
+                  'topRight',
+                ])}
+              />
             </View>
           </View>
         </>
@@ -105,3 +174,22 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       return null
   }
 }
+
+function noCorners(
+  corners: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight')[],
+) {
+  const styles: StyleProp<ViewStyle>[] = []
+  if (corners.includes('topLeft')) {
+    styles.push({borderTopLeftRadius: 0})
+  }
+  if (corners.includes('topRight')) {
+    styles.push({borderTopRightRadius: 0})
+  }
+  if (corners.includes('bottomLeft')) {
+    styles.push({borderBottomLeftRadius: 0})
+  }
+  if (corners.includes('bottomRight')) {
+    styles.push({borderBottomRightRadius: 0})
+  }
+  return StyleSheet.flatten(styles)
+}
diff --git a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx
index 1f966d7107..6f1c88dcdf 100644
--- a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx
+++ b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx
@@ -117,7 +117,7 @@ export function ExternalGifEmbed({
         style={[
           {height: imageDims.height},
           styles.gifContainer,
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           {
             borderBottomLeftRadius: 0,
diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
index 2fc53a4df9..54e1eb4d55 100644
--- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
@@ -59,15 +59,15 @@ export const ExternalLinkEmbed = ({
   }
 
   return (
-    <View style={[a.flex_col, a.w_full]}>
+    <View style={[a.flex_col, a.rounded_md, a.w_full]}>
       <LinkWrapper link={link} onOpen={onOpen} style={style}>
         {imageUri && !embedPlayerParams ? (
           <View>
             <Image
               style={{
                 aspectRatio: 1.91,
-                borderTopRightRadius: 8,
-                borderTopLeftRadius: 8,
+                borderTopRightRadius: a.rounded_md.borderRadius,
+                borderTopLeftRadius: a.rounded_md.borderRadius,
               }}
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
@@ -101,11 +101,11 @@ export const ExternalLinkEmbed = ({
             a.py_sm,
             t.atoms.border_contrast_low,
             {
-              borderBottomRightRadius: 8,
-              borderBottomLeftRadius: 8,
+              borderBottomRightRadius: a.rounded_md.borderRadius,
+              borderBottomLeftRadius: a.rounded_md.borderRadius,
               paddingHorizontal: isMobile ? 10 : 14,
             },
-            !imageUri && !embedPlayerParams && [a.border, a.rounded_sm],
+            !imageUri && !embedPlayerParams && [a.border, a.rounded_md],
           ]}>
           <Text
             type="sm"
diff --git a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
index 64ea0029fa..6d5eacd1a0 100644
--- a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
+++ b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
@@ -229,7 +229,7 @@ export function ExternalPlayer({
         collapsable={false}
         style={[
           aspect,
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           {
             borderBottomLeftRadius: 0,
@@ -245,7 +245,7 @@ export function ExternalPlayer({
             />
             <Fill
               style={[
-                a.rounded_sm,
+                a.rounded_md,
                 t.name === 'light' ? t.atoms.bg_contrast_975 : t.atoms.bg,
                 {
                   borderBottomLeftRadius: 0,
@@ -267,7 +267,7 @@ export function ExternalPlayer({
         ) : (
           <Fill
             style={[
-              a.rounded_sm,
+              a.rounded_md,
               {
                 backgroundColor:
                   t.name === 'light' ? t.palette.contrast_975 : 'black',
@@ -304,8 +304,8 @@ export function ExternalPlayer({
 
 const styles = StyleSheet.create({
   topRadius: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopLeftRadius: a.rounded_md.borderRadius,
+    borderTopRightRadius: a.rounded_md.borderRadius,
   },
   overlayContainer: {
     flex: 1,
@@ -319,8 +319,8 @@ const styles = StyleSheet.create({
     zIndex: 3,
   },
   webview: {
-    borderTopRightRadius: 8,
-    borderTopLeftRadius: 8,
+    borderTopRightRadius: a.rounded_md.borderRadius,
+    borderTopLeftRadius: a.rounded_md.borderRadius,
     backgroundColor: 'transparent',
   },
   gifContainer: {
diff --git a/src/view/com/util/post-embeds/GifEmbed.tsx b/src/view/com/util/post-embeds/GifEmbed.tsx
index 8e99dc8d44..7b6c42fa4e 100644
--- a/src/view/com/util/post-embeds/GifEmbed.tsx
+++ b/src/view/com/util/post-embeds/GifEmbed.tsx
@@ -53,7 +53,7 @@ function PlaybackControls({
         a.inset_0,
         a.w_full,
         a.h_full,
-        a.rounded_sm,
+        a.rounded_md,
         {
           zIndex: 2,
           backgroundColor: !isLoaded
@@ -117,10 +117,10 @@ export function GifEmbed({
   )
 
   return (
-    <View style={[a.rounded_sm, a.overflow_hidden, a.mt_sm, style]}>
+    <View style={[a.rounded_md, a.overflow_hidden, a.mt_sm, style]}>
       <View
         style={[
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           {aspectRatio: params.dimensions!.width / params.dimensions!.height},
         ]}>
@@ -132,7 +132,7 @@ export function GifEmbed({
         <GifView
           source={params.playerUri}
           placeholderSource={link.thumb}
-          style={[a.flex_1, a.rounded_sm]}
+          style={[a.flex_1, a.rounded_md]}
           autoplay={!autoplayDisabled}
           onPlayerStateChange={onPlayerStateChange}
           ref={playerRef}
diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx
index d50119025f..79e3264046 100644
--- a/src/view/com/util/post-embeds/QuoteEmbed.tsx
+++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx
@@ -219,7 +219,14 @@ export function QuoteEmbed({
   return (
     <ContentHider
       modui={moderation?.ui('contentList')}
-      style={[styles.container, a.border, t.atoms.border_contrast_low, style]}
+      style={[
+        a.rounded_md,
+        a.p_md,
+        a.mt_sm,
+        a.border,
+        t.atoms.border_contrast_low,
+        style,
+      ]}
       childContainerStyle={[a.pt_sm]}>
       <Link
         hoverStyle={{borderColor: pal.colors.borderLinkHover}}
@@ -293,13 +300,6 @@ function viewRecordToPostView(
 }
 
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 8,
-    marginTop: 8,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-  },
   errorContainer: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx
index 267b5d1843..24802d1882 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.tsx
@@ -40,11 +40,11 @@ export function VideoEmbed({embed}: Props) {
     <View
       style={[
         a.w_full,
-        a.rounded_sm,
+        a.rounded_md,
         a.overflow_hidden,
         {aspectRatio},
         {backgroundColor: 'black'},
-        a.my_xs,
+        a.mt_xs,
       ]}>
       <ErrorBoundary renderError={renderError} key={key}>
         <InnerWrapper embed={embed} />
diff --git a/src/view/com/util/post-embeds/VideoEmbed.web.tsx b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
index 908c06e221..3180dd99eb 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
@@ -66,8 +66,8 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
         {aspectRatio},
         {backgroundColor: 'black'},
         a.relative,
-        a.rounded_sm,
-        a.my_xs,
+        a.rounded_md,
+        a.mt_xs,
       ]}>
       <div
         ref={ref}
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
index 90a21254f9..fa577fb509 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
@@ -78,7 +78,7 @@ export function VideoEmbedInnerWeb({
   }, [embed.playlist])
 
   return (
-    <View style={[a.flex_1, a.rounded_sm, a.overflow_hidden]}>
+    <View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
       <div ref={containerRef} style={{height: '100%', width: '100%'}}>
         <figure style={{margin: 0, position: 'absolute', inset: 0}}>
           <video
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index b4a6cf8251..090577a5e6 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -138,7 +138,7 @@ export function PostEmbeds({
         const image = images[0]
         return (
           <ContentHider modui={moderation?.ui('contentMedia')}>
-            <View style={[styles.container, style]}>
+            <View style={[a.mt_sm, style]}>
               <AutoSizedImage
                 crop={
                   viewContext === PostEmbedViewContext.ThreadHighlighted
@@ -162,7 +162,7 @@ export function PostEmbeds({
 
       return (
         <ContentHider modui={moderation?.ui('contentMedia')}>
-          <View style={[styles.container, style]}>
+          <View style={[a.mt_sm, style]}>
             <ImageLayoutGrid
               images={embed.images}
               onPress={_openLightbox}
@@ -184,7 +184,7 @@ export function PostEmbeds({
         <ExternalLinkEmbed
           link={link}
           onOpen={onOpen}
-          style={[styles.container, style]}
+          style={[a.mt_sm, style]}
         />
       </ContentHider>
     )
@@ -247,9 +247,6 @@ function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    marginTop: 8,
-  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,