fix: style tweaks to card view

packages/core/src/components/collections/CollectionSearch.tsx

@@ -9,14 +9,14 @@ import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 interface CollectionSearchProps {
   collections: Collections;
   collection?: Collection;
-  searchTerm: string;
+  searchTerm: string | undefined;
   onSubmit: (query: string, collection?: string) => void;
 }
 
 const CollectionSearch = ({
   collections: collectionsMap,
   collection,
-  searchTerm,
+  searchTerm = '',
   onSubmit,
   t,
 }: TranslatedProps<CollectionSearchProps>) => {

packages/core/src/components/collections/entries/Entries.tsx

@@ -14,6 +14,7 @@ export interface BaseEntriesProps {
   isFetching: boolean;
   viewStyle: ViewStyle;
   cursor: Cursor;
+  filterTerm: string;
   handleCursorActions?: (action: string) => void;
 }
 
@@ -32,6 +33,7 @@ const Entries = ({
   isFetching,
   viewStyle,
   cursor,
+  filterTerm,
   handleCursorActions,
   t,
   page,
@@ -62,6 +64,7 @@ const Entries = ({
         handleCursorActions={handleCursorActions}
         page={page}
         isLoadingEntries={isFetching && page !== undefined && entries.length > 0}
+        filterTerm={filterTerm}
       />
     ) : (
       <EntryListing
@@ -73,6 +76,7 @@ const Entries = ({
         handleCursorActions={handleCursorActions}
         page={page}
         isLoadingEntries={isFetching && page !== undefined && entries.length > 0}
+        filterTerm={filterTerm}
       />
     );
   }

packages/core/src/components/collections/entries/EntriesCollection.tsx

@@ -132,6 +132,7 @@ const EntriesCollection = ({
                 cursor={cursor}
                 handleCursorActions={handleCursorActions}
                 page={page}
+                filterTerm={filterTerm}
               />
             </div>
           );
@@ -151,6 +152,7 @@ const EntriesCollection = ({
       cursor={cursor}
       handleCursorActions={handleCursorActions}
       page={page}
+      filterTerm={filterTerm}
     />
   );
 };

packages/core/src/components/collections/entries/EntryListing.tsx

@@ -24,6 +24,7 @@ export interface BaseEntryListingProps {
   viewStyle: ViewStyle;
   cursor?: Cursor;
   isLoadingEntries: boolean;
+  filterTerm: string;
   handleCursorActions?: (action: string) => void;
   page?: number;
 }
@@ -45,6 +46,7 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
   cursor,
   viewStyle,
   isLoadingEntries,
+  filterTerm,
   handleCursorActions,
   t,
   ...otherProps
@@ -169,7 +171,7 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
 
   return (
     <EntryListingGrid
-      key="grid"
+      key={'collection' in otherProps ? otherProps.collection.name : `search-grid-${filterTerm}`}
       entryData={entryData}
       onLoadMore={handleLoadMore}
       canLoadMore={Boolean(hasMore && handleLoadMore)}

packages/core/src/components/collections/entries/EntryListingCardGrid.tsx

@@ -28,6 +28,7 @@ export interface EntryListingCardGridProps {
 
 export interface CardGridItemData {
   columnCount: number;
+  cardHeights: number[];
   entryData: CollectionEntryData[];
   t: t;
 }
@@ -36,7 +37,7 @@ const CardWrapper = ({
   rowIndex,
   columnIndex,
   style,
-  data: { columnCount, entryData, t },
+  data: { columnCount, cardHeights, entryData, t },
 }: GridChildComponentProps<CardGridItemData>) => {
   const left = useMemo(
     () =>
@@ -60,6 +61,8 @@ const CardWrapper = ({
     return null;
   }
   const data = entryData[index];
+  const cardHeight =
+    index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN : style.height;
 
   return (
     <div
@@ -68,7 +71,7 @@ const CardWrapper = ({
         left,
         top,
         width: style.width,
-        height: style.height,
+        height: cardHeight,
         paddingRight: `${columnIndex + 1 === columnCount ? 0 : COLLECTION_CARD_MARGIN}px`,
         paddingBottom: `${COLLECTION_CARD_MARGIN}px`,
       }}
@@ -103,6 +106,13 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
   }, []);
 
   const getDefaultHeight = useCallback((data?: CollectionEntryData) => {
+    console.log(
+      'DEFAULT HEIGHT',
+      data,
+      isNotNullish(data?.imageFieldName)
+        ? COLLECTION_CARD_HEIGHT
+        : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE,
+    );
     return isNotNullish(data?.imageFieldName)
       ? COLLECTION_CARD_HEIGHT
       : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE;
@@ -166,15 +176,41 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
                     : width * columnWidth + COLLECTION_CARD_MARGIN
                 }
                 rowCount={rowCount}
-                rowHeight={index =>
+                rowHeight={index => {
-                  (cardHeights.length > index ? cardHeights[index] : getDefaultHeight()) +
+                  const rowStart = index * columnCount;
-                  COLLECTION_CARD_MARGIN
+                  const rowEnd = (index + 1) * columnCount - 1;
+                  let rowHeight = 0;
+                  for (let i = rowStart; i <= rowEnd; i++) {
+                    if (cardHeights.length <= i) {
+                      break;
                     }
+
+                    if (cardHeights[i] > rowHeight && cardHeights[i]) {
+                      rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN;
+
+                      console.log(
+                        'HEIGHT @index',
+                        i,
+                        cardHeights[i],
+                        cardHeights[i] + COLLECTION_CARD_MARGIN,
+                      );
+                    }
+                  }
+
+                  if (rowHeight === 0) {
+                    rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN;
+                  }
+
+                  console.log('HEIGHT', index, rowHeight);
+
+                  return rowHeight;
+                }}
                 width={width}
                 height={height}
                 itemData={
                   {
                     entryData,
+                    cardHeights,
                     columnCount,
                     t,
                   } as CardGridItemData