fix collection size (#3723)

* fix collection size

* fix height

* slice string

* add description to collection details

* add cols

* edit slice length

* remove log

Author: 0xKurt

packages/grant-explorer/src/features/collections/CollectionCard.tsx

@@ -11,8 +11,15 @@ export type CollectionCardProps = {
 const CollectionCard = ({ collection, size }: CollectionCardProps) => {
   const { cid, name, description } = collection;
 
+  const sliceLength = size === "small" ? 165 : 385;
+
+  let desc = description;
+  if (description && description.length > sliceLength) {
+    desc = description.slice(0, sliceLength) + "...";
+  }
+
   return (
-    <BasicCard className="w-full">
+    <BasicCard className="w-full h-[246px]">
       <a
         href={collectionPath(cid!)}
         data-track-event={`home-collections-card-${size}`}
@@ -21,12 +28,8 @@ const CollectionCard = ({ collection, size }: CollectionCardProps) => {
           <CollectionBanner />
         </CardHeader>
         <div className="p-4 space-y-1">
-          <div className="font-medium truncate text-xl">
-            {name}
-          </div>
-          <p className="text-grey-400 text-sm">
-            {description}
-          </p>
+          <div className="font-medium truncate text-xl">{name}</div>
+          <p className="text-grey-400 text-sm">{desc}</p>
         </div>
       </a>
     </BasicCard>

packages/grant-explorer/src/features/collections/CollectionDetails.tsx

@@ -3,6 +3,7 @@ import { CheckIcon, LinkIcon } from "@heroicons/react/20/solid";
 import { ShoppingCartIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 import { CollectionV1 } from "./collections";
+import { useCollections } from "./hooks/useCollections";
 
 type Props = {
   collection: CollectionV1;
@@ -17,17 +18,21 @@ export function CollectionDetails({
   projectsInView,
   onAddAllApplicationsToCart,
 }: Props) {
+  const collections = useCollections();
+
+  // filter collections by collection.href
+  const description = collections.data?.find(
+    (c) => c.cid && location.href.includes(c.cid)
+  )?.description;
+
   return (
     <div className="mt-16">
-      <h3 className="text-4xl font-medium mb-2">{`${
-        collection.name ?? defaultCollectionName
-      } (${projectsInView})`}</h3>
-      <div className="flex">
-        <div className="text-lg flex-1 whitespace-pre-wrap">
-          {collection.description}
-        </div>
-        <div className="w-96">
-          <div className="flex justify-end gap-2">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+        <div className="col-span-1 md:col-span-4 flex flex-col md:flex-row justify-between items-start md:items-center">
+          <h3 className="text-4xl font-medium">
+            {`${collection.name ?? defaultCollectionName} (${projectsInView})`}
+          </h3>
+          <div className="flex gap-2 mt-4 md:mt-0">
             <ShareButton url={location.href} />
             <AddToCartButton
               current={projectsInView}
@@ -36,6 +41,9 @@ export function CollectionDetails({
             />
           </div>
         </div>
+        <div className="col-span-1 md:col-span-3 text-lg flex-1 whitespace-pre-wrap">
+          {description ?? collection.description}
+        </div>
       </div>
     </div>
   );

packages/grant-explorer/src/features/discovery/CardBanner.tsx

@@ -117,7 +117,7 @@ export function CollectionBanner() {
   const [gradient] = useState<string[]>(getRandomGradient());
   return (
     <div
-      className="h-[70px]"
+      className="h-[104px]"
       style={{
         background: `linear-gradient(180deg, #${gradient[0]} 0%, #${gradient[1]} 100%)`,
       }}