WIP

pages/collections/[id].tsx

@@ -102,24 +102,24 @@ export default function Index() {
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
           <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
-            {activeCollection ? (
+            {activeCollection && (
               <div className="flex gap-3 items-center">
                 <div className="flex gap-2">
                   <FontAwesomeIcon
                     icon={faFolder}
                     style={{ color: activeCollection?.color }}
-                    className="sm:w-8 sm:h-8 w-6 h-6 mt-2 drop-shadow"
+                    className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
                   />
-                  <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+                  <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold py-1">
                     {activeCollection?.name}
                   </p>
                 </div>
               </div>
-            ) : null}
+            )}
 
             {activeCollection ? (
               <div
-                className={`text-sky-400 w-60 ${
+                className={`text-sky-400 min-w-[15rem] ${
                   activeCollection.members[0] && "mr-3"
                 }`}
               >

pages/collections/index.tsx

@@ -191,7 +191,7 @@ export default function Collections() {
           </div>
         </div>
 
-        <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 gap-5">
+        <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
           {sortedCollections.map((e, i) => {
             return <CollectionCard key={i} collection={e} />;
           })}