Focus Crop Issue When Scrolling – Cards Not Fully Visible

Vega Open Beta Q&A
5

Hi @vittalmaradi

I was able to replicate part of your issue and have taken this up with the Internal team. They are currently working on it.

However I noticed something in MovieGrid.tsx that I feel, could be improved. In your code, you have added:

const calculateEstimatedItemSize = (item: any) => {
  const cardType = item?.data?.[0]?.cardType;
  switch (cardType) {
    case 'roller_poster':
      return 450;
    case 'sheet_poster':
    case 'sheet_poster_package':
      return 400;
    case 'network_poster':
    case 'network_poster_package':
      return 350;
    default:
      return 450;
  }
};

This only checks the first item (item?.data?.[0]?.cardType)

However, if we change it to the below snippet (that I used) , we can processes all items in the array (item.data.map())

const calculateEstimatedItemSize = (item: any) => {
      if (!item?.data?.length) {
        return 450;
      }

      return Math.max(
        ...item.data.map((dataItem: any) => {
          switch (dataItem?.cardType) {
            case 'roller_poster':
              return 450;
            case 'sheet_poster':
            case 'sheet_poster_package':
              return 400;
            case 'network_poster':
            case 'network_poster_package':
              return 350;
            default:
              return 450;
          }
        }),
      );
    };

Following my changes in calculateEstimatedItemSize , we are returning the maximum size among all items in the array. So it’s more robust for handling multiple items and ensures the container is sized for the largest content.

Can you please try this for now and let me know if you observe any changes?
In the meantime, I’ll get back to you with more updates.

Warm regards,
Ivy