Squash carousel in chat messages, fix rounding (#10286)

src/components/Post/Embed/index.tsx

@@ -39,12 +39,11 @@ import {PostPlaceholder as PostPlaceholderText} from './PostPlaceholder'
 import {
   type CommonProps,
   type EmbedProps,
-  PostEmbedViewContext,
-  QuoteEmbedViewContext,
+  type PostEmbedViewContext,
 } from './types'
 import {VideoEmbed} from './VideoEmbed'
 
-export {PostEmbedViewContext, QuoteEmbedViewContext} from './types'
+export {PostEmbedViewContext} from './types'
 
 export function Embed({embed: rawEmbed, ...rest}: EmbedProps) {
   const embed = parseEmbed(rawEmbed)
@@ -164,11 +163,7 @@ function RecordEmbed({
         <QuoteEmbed
           {...rest}
           embed={embed}
-          viewContext={
-            rest.viewContext === PostEmbedViewContext.Feed
-              ? QuoteEmbedViewContext.FeedEmbedRecordWithMedia
-              : undefined
-          }
+          viewContext={rest.viewContext}
           isWithinQuote={rest.isWithinQuote}
           allowNestedQuotes={rest.allowNestedQuotes}
         />
@@ -229,9 +224,10 @@ export function QuoteEmbed({
   linkDisabled,
   isWithinQuote: parentIsWithinQuote,
   allowNestedQuotes: parentAllowNestedQuotes,
+  viewContext,
 }: Omit<CommonProps, 'viewContext'> & {
   embed: EmbedType<'post'>
-  viewContext?: QuoteEmbedViewContext
+  viewContext?: PostEmbedViewContext
   linkDisabled?: boolean
 }) {
   const moderationOpts = useModerationOpts()
@@ -309,7 +305,7 @@ export function QuoteEmbed({
         <Embed
           embed={quote.embed}
           moderation={moderation}
-          viewContext={PostEmbedViewContext.FeedEmbedRecordWithMedia}
+          viewContext={viewContext}
           isWithinQuote={parentIsWithinQuote ?? true}
           // already within quote? override nested
           allowNestedQuotes={

src/components/Post/Embed/types.ts

@@ -5,10 +5,7 @@ export enum PostEmbedViewContext {
   ThreadHighlighted = 'ThreadHighlighted',
   Feed = 'Feed',
   FeedEmbedRecordWithMedia = 'FeedEmbedRecordWithMedia',
-}
-
-export enum QuoteEmbedViewContext {
-  FeedEmbedRecordWithMedia = PostEmbedViewContext.FeedEmbedRecordWithMedia,
+  ChatMessage = 'ChatMessage',
 }
 
 export type CommonProps = {

src/components/dms/MessageItemEmbed.tsx

@@ -30,7 +30,6 @@ let MessageItemEmbed = ({
         style={[
           !isFromSelf && a.ml_sm,
           t.atoms.bg,
-          a.rounded_md,
           native({
             flexBasis: 0,
             width: Math.min(screen.width, 600) / 1.4,
@@ -48,9 +47,10 @@ let MessageItemEmbed = ({
           <Embed
             embed={embed}
             allowNestedQuotes
-            viewContext={PostEmbedViewContext.Feed}
+            viewContext={PostEmbedViewContext.ChatMessage}
             style={[
               a.rounded_xl,
+              a.overflow_hidden,
               a.border_0,
               isFromSelf
                 ? {

src/components/images/Gallery/index.tsx

@@ -103,7 +103,14 @@ export function Gallery({
   const largeAltBadge = useLargeAltBadgeEnabled()
   const bps = useBreakpoints()
   const window = useWindowDimensions()
+  const isWithinQuote =
+    viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+  const isWithinChat = viewContext === PostEmbedViewContext.ChatMessage
+  const hideBadges = isWithinQuote
   const contentHeight = useMemo(() => {
+    if (isWithinChat) {
+      return 120
+    }
     if (bps.gtMobile) {
       return 300
     } else if (bps.gtPhone) {
@@ -111,10 +118,7 @@ export function Gallery({
     } else {
       return 200
     }
-  }, [bps])
-  const isWithinQuote =
-    viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-  const hideBadges = isWithinQuote
+  }, [bps, isWithinChat])
 
   /*
    * Container overflow styles