fix: new entry button text overflow

Author: KaneFreeman

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;

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;
 }

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>