fix(ContextMenu): adjust menu size to not get cut (#13286)

fix: adjust context menu for iOS tablet to respect boundaries when increasing

Author: araujobarret

src/app/Components/ArtworkGrids/ArtworkGridItem.tsx

@@ -266,6 +266,8 @@ export const Artwork: React.FC<ArtworkProps> = memo(
           onCreateAlertActionPress={() => setShowCreateArtworkAlertModal(true)}
           artwork={artwork}
           hideCreateAlertOnArtworkPreview={hideCreateAlertOnArtworkPreview}
+          width={Number(height ?? 0) * (artwork.image?.aspectRatio ?? 1)}
+          height={height}
         >
           <RouterLink
             haptic

src/app/Components/ArtworkRail/ArtworkRailCard.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Spacer } from "@artsy/palette-mobile"
 import { ArtworkRailCard_artwork$key } from "__generated__/ArtworkRailCard_artwork.graphql"
 import { CreateArtworkAlertModal } from "app/Components/Artist/ArtistArtworks/CreateArtworkAlertModal"
 import {
+  ARTWORK_RAIL_CARD_IMAGE_HEIGHT,
   ARTWORK_RAIL_CARD_MAX_WIDTH,
   ARTWORK_RAIL_CARD_MIN_WIDTH,
   ArtworkRailCardImage,
@@ -108,6 +109,8 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = memo(
                   lotLabel,
                   SalePriceComponent,
                 }}
+                width={ARTWORK_RAIL_CARD_MAX_WIDTH}
+                height={ARTWORK_RAIL_CARD_IMAGE_HEIGHT}
               >
                 <Flex
                   minWidth={ARTWORK_RAIL_CARD_MIN_WIDTH}

src/app/Components/ContextMenu/ContextMenuArtwork.tsx

@@ -50,6 +50,8 @@ interface ContextMenuArtworkProps {
   contextModule?: ContextModule
   contextScreenOwnerType?: ScreenOwnerType
   hideCreateAlertOnArtworkPreview?: boolean
+  width?: number
+  height?: number
 }
 
 export const ContextMenuArtwork: React.FC<React.PropsWithChildren<ContextMenuArtworkProps>> = ({
@@ -61,6 +63,8 @@ export const ContextMenuArtwork: React.FC<React.PropsWithChildren<ContextMenuArt
   contextModule,
   contextScreenOwnerType,
   hideCreateAlertOnArtworkPreview,
+  width,
+  height,
   ...restProps
 }) => {
   const artwork = useFragment(artworkFragment, restProps.artwork)
@@ -198,7 +202,12 @@ export const ContextMenuArtwork: React.FC<React.PropsWithChildren<ContextMenuArt
     artworkDisplayProps: ArtworkDisplayProps | undefined
   ) => {
     return (
-      <ContextMenuArtworkPreviewCard artwork={artwork} artworkDisplayProps={artworkDisplayProps} />
+      <ContextMenuArtworkPreviewCard
+        artwork={artwork}
+        artworkDisplayProps={artworkDisplayProps}
+        width={width}
+        height={height}
+      />
     )
   }
 

src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx

@@ -9,22 +9,34 @@ import { PixelRatio } from "react-native"
 import { isTablet } from "react-native-device-info"
 import { graphql, useFragment } from "react-relay"
 
-const ARTWORK_PREVIEW_TEXT_CONTAINER_HEIGHT = 70
+const ARTWORK_PREVIEW_TEXT_CONTAINER_HEIGHT = isTablet() ? 90 : 70
+const TABLET_CONTEXT_MENU_MAX_HEIGHT = 360
 
-const useFullWidth = () => {
+const useFullWidth = (width?: number, height?: number) => {
   const space = useSpace()
-  const { width } = useScreenDimensions()
-  const extraLargeWidth = isTablet() ? 400 : width - space(4)
-  return extraLargeWidth
+  const { width: _width } = useScreenDimensions()
+
+  if (isTablet() && width && height) {
+    return {
+      containerWidth: width - space(4),
+      containerHeight: Math.min(height, TABLET_CONTEXT_MENU_MAX_HEIGHT),
+    }
+  }
+
+  return { containerWidth: _width - space(4) }
 }
 
 export interface ContextMenuArtworkPreviewCardProps {
   artwork: ContextMenuArtworkPreviewCard_artwork$key
   artworkDisplayProps?: ArtworkDisplayProps
+  width?: number
+  height?: number
 }
 
 export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCardProps> = ({
   artworkDisplayProps,
+  width,
+  height,
   ...restProps
 }) => {
   const artwork = useFragment(artworkFragment, restProps.artwork)
@@ -37,7 +49,7 @@ export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCa
     lotLabel,
   } = artworkDisplayProps ?? {}
 
-  const FULL_WIDTH_RAIL_CARD_IMAGE_WIDTH = useFullWidth()
+  const { containerWidth, containerHeight } = useFullWidth(width, height)
 
   const fontScale = PixelRatio.getFontScale()
 
@@ -51,8 +63,6 @@ export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCa
     return ARTWORK_PREVIEW_TEXT_CONTAINER_HEIGHT
   }
 
-  const containerWidth = FULL_WIDTH_RAIL_CARD_IMAGE_WIDTH
-
   const space = useSpace()
 
   return (
@@ -61,15 +71,17 @@ export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCa
       m={1}
       style={{ borderRadius: space(1), padding: space(2) }}
     >
-      <ContextMenuArtworkPreviewCardImage containerWidth={containerWidth} artwork={artwork} />
+      <ContextMenuArtworkPreviewCardImage
+        containerWidth={containerWidth}
+        containerHeight={containerHeight}
+        artwork={artwork}
+      />
       <Flex
         my={1}
         width={containerWidth}
         // Recently sold artworks require more space for the text container
         // to accommodate the estimate and realized price
-        style={{
-          height: fontScale * getTextHeight(),
-        }}
+        style={{ height: fontScale * getTextHeight() }}
         backgroundColor={backgroundColor}
         flexDirection="row"
         justifyContent="space-between"

src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx

@@ -7,46 +7,60 @@ const ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT = 50
 export interface ContextMenuArtworkPreviewCardImageProps {
   artwork: ContextMenuArtworkPreviewCardImage_artwork$key
   containerWidth: number
+  containerHeight?: number
 }
 
 export const ContextMenuArtworkPreviewCardImage: React.FC<
   ContextMenuArtworkPreviewCardImageProps
-> = ({ containerWidth, ...restProps }) => {
+> = ({ containerWidth, containerHeight: _containerHeight, ...restProps }) => {
   const artwork = useFragment(artworkFragment, restProps.artwork)
   const color = useColor()
 
   const aspectRatio = artwork?.contextMenuImage?.aspectRatio
   const { width, height, src } = artwork?.contextMenuImage?.resized || {}
 
+  const { height: screenHeight } = useScreenDimensions()
+
   const useImageDimensions = () => {
     const imageAspectRatio = aspectRatio ?? (width && height ? width / height : 1)
 
-    const imageWidth = containerWidth
-    const imageHeight = imageWidth / imageAspectRatio
+    // Check if this is a narrow image and we have containerHeight prop
+    const isNarrowImage = imageAspectRatio < 1
+    const useProvidedHeight = isNarrowImage && _containerHeight
 
-    const { height: screenHeight } = useScreenDimensions()
-    const maxHeight = Math.floor(screenHeight / 2)
+    if (useProvidedHeight) {
+      // For narrow images with provided height: use the height and calculate width
+      const displayImageHeight = _containerHeight
+      const displayImageWidth = displayImageHeight * imageAspectRatio
+      return { containerHeight: _containerHeight, displayImageWidth, displayImageHeight }
+    } else {
+      // For flat images: use existing logic (width-driven)
+      const imageWidth = containerWidth
+      const imageHeight = imageWidth / imageAspectRatio
 
-    let containerHeight = imageHeight
+      const maxHeight = Math.floor(screenHeight / 2)
 
-    // Case when the image height is less than the minimum height
-    if (imageHeight <= ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT) {
-      containerHeight = ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT
-    }
+      let calculatedContainerHeight = imageHeight
 
-    // Case when the image height exceeds the maximum height
-    if (imageHeight >= maxHeight) {
-      containerHeight = maxHeight
-    }
+      // Case when the image height is less than the minimum height
+      if (imageHeight <= ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT) {
+        calculatedContainerHeight = ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT
+      }
 
-    const displayImageHeight =
-      imageHeight <= ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT
-        ? Math.min(imageHeight, ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT)
-        : Math.min(Math.max(imageHeight, ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT), maxHeight)
+      // Case when the image height exceeds the maximum height
+      if (imageHeight >= maxHeight) {
+        calculatedContainerHeight = maxHeight
+      }
+
+      const displayImageHeight =
+        imageHeight <= ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT
+          ? Math.min(imageHeight, ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT)
+          : Math.min(Math.max(imageHeight, ARTWORK_PREVIEW_IMAGE_MIN_HEIGHT), maxHeight)
 
-    const displayImageWidth = Math.min(displayImageHeight * imageAspectRatio, imageWidth)
+      const displayImageWidth = Math.min(displayImageHeight * imageAspectRatio, imageWidth)
 
-    return { containerHeight, displayImageWidth, displayImageHeight }
+      return { containerHeight: calculatedContainerHeight, displayImageWidth, displayImageHeight }
+    }
   }
 
   const { containerHeight, displayImageWidth, displayImageHeight } = useImageDimensions()
@@ -74,7 +88,6 @@ export const ContextMenuArtworkPreviewCardImage: React.FC<
           src={src}
           width={displayImageWidth}
           height={displayImageHeight}
-          aspectRatio={aspectRatio}
           performResize={false}
           resizeMode="cover"
           testID="artwork-rail-card-image"