From 79a6fc5a2ef7097e6db20fa00a30eece24285ad4 Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Fri, 26 Apr 2024 11:08:17 -0400
Subject: [PATCH] fix: card height with date field (#1106)

---
 .../components/collections/Collection.classes.ts  |  1 +
 .../src/components/collections/Collection.css     |  7 ++++++-
 .../components/collections/CollectionHeader.tsx   |  8 +++++---
 .../collections/entries/EntryListingCardGrid.tsx  | 15 +++++++++++----
 packages/core/src/constants/views.ts              |  1 +
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/collections/Collection.classes.ts b/packages/core/src/components/collections/Collection.classes.ts
index 5a8ad50e8..6cad0207f 100644
--- a/packages/core/src/components/collections/Collection.classes.ts
+++ b/packages/core/src/components/collections/Collection.classes.ts
@@ -12,6 +12,7 @@ const collectionClasses = generateClassNames('Collection', [
   'header-icon',
   'header-label',
   'new-entry-button',
+  'new-entry-button-text',
 ]);
 
 export default collectionClasses;
diff --git a/packages/core/src/components/collections/Collection.css b/packages/core/src/components/collections/Collection.css
index f751d38eb..ea5c82a68 100644
--- a/packages/core/src/components/collections/Collection.css
+++ b/packages/core/src/components/collections/Collection.css
@@ -83,5 +83,10 @@
 
 .CMS_Collection_new-entry-button {
   @apply hidden
-    md:flex;
+    md:flex
+    min-w-0;
+}
+
+.CMS_Collection_new-entry-button-text {
+  @apply truncate;
 }
diff --git a/packages/core/src/components/collections/CollectionHeader.tsx b/packages/core/src/components/collections/CollectionHeader.tsx
index 220c91738..c02c8df34 100644
--- a/packages/core/src/components/collections/CollectionHeader.tsx
+++ b/packages/core/src/components/collections/CollectionHeader.tsx
@@ -76,9 +76,11 @@ const CollectionHeader: FC<CollectionHeaderProps> = ({ collection }) => {
       </h2>
       {newEntryUrl ? (
         <Button to={newEntryUrl} className={collectionClasses['new-entry-button']}>
-          {t('collection.collectionTop.newButton', {
-            collectionLabel: collectionLabelSingular ?? pluralLabel,
-          })}
+          <div className={collectionClasses['new-entry-button-text']}>
+            {t('collection.collectionTop.newButton', {
+              collectionLabel: collectionLabelSingular ?? pluralLabel,
+            })}
+          </div>
         </Button>
       ) : null}
     </div>
diff --git a/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx b/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx
index 4b1812d54..0d39e8549 100644
--- a/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx
+++ b/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx
@@ -3,6 +3,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeGrid as Grid } from 'react-window';
 
 import {
+  COLLECTION_CARD_DATE_HEIGHT,
   COLLECTION_CARD_HEIGHT,
   COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE,
   COLLECTION_CARD_MARGIN,
@@ -64,7 +65,7 @@ const CardWrapper: FC<GridChildComponentProps<CardGridItemData>> = ({
   }
   const data = entryData[index];
   const cardHeight =
-    index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN : style.height;
+    index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN * 2 : style.height;
 
   return (
     <div
@@ -114,9 +115,15 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
   }, []);
 
   const getDefaultHeight = useCallback((data?: CollectionEntryData) => {
-    return isNotNullish(data?.imageFieldName)
+    const base = isNotNullish(data?.imageFieldName)
       ? COLLECTION_CARD_HEIGHT
       : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE;
+
+    if (isNotNullish(data?.dateFieldName)) {
+      return base + COLLECTION_CARD_DATE_HEIGHT;
+    }
+
+    return base;
   }, []);
 
   const [prevCardHeights, setPrevCardHeight] = useState<number[]>([]);
@@ -185,12 +192,12 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
                     }
 
                     if (cardHeights[i] > rowHeight && cardHeights[i]) {
-                      rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN;
+                      rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN * 2;
                     }
                   }
 
                   if (rowHeight === 0) {
-                    rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN;
+                    rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN * 2;
                   }
 
                   return rowHeight;
diff --git a/packages/core/src/constants/views.ts b/packages/core/src/constants/views.ts
index ed43bdb6e..75398a9eb 100644
--- a/packages/core/src/constants/views.ts
+++ b/packages/core/src/constants/views.ts
@@ -8,6 +8,7 @@ export const COLLECTION_CARD_WIDTH = 240;
 export const COLLECTION_CARD_HEIGHT = 204;
 export const COLLECTION_CARD_IMAGE_HEIGHT = 140;
 export const COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE = 56;
+export const COLLECTION_CARD_DATE_HEIGHT = 24;
 export const COLLECTION_CARD_MARGIN = 10;
 
 export const EDITOR_SIZE_COMPACT = 'compact';