small changes

components/CollectionCard.tsx

@@ -18,12 +18,17 @@ export default function ({ collection }: { collection: Collection }) {
   return (
     <Link href={`/collections/${collection.id}`}>
       <div className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
-        <div className="flex justify-between text-sky-900 items-center">
-          <p className="text-lg w-max">{collection.name}</p>
-          <FontAwesomeIcon
-            icon={faChevronRight}
-            className="w-3 h-3 text-gray-500"
-          />
+        <div>
+          <div className="flex justify-between text-sky-900 items-center">
+            <p className="text-lg w-max">{collection.name}</p>
+            <FontAwesomeIcon
+              icon={faChevronRight}
+              className="w-3 h-3 text-gray-500"
+            />
+          </div>
+          <p className="text-sm font-bold text-gray-500">
+            {collection.description}
+          </p>
         </div>
         <p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
       </div>

components/Modal/AddCollection.tsx

@@ -42,7 +42,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
           }
           type="text"
           placeholder="e.g. Example Collection"
-          className="w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -55,7 +55,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
           }
           type="text"
           placeholder="Collection description (Optional)"
-          className="w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>