From ffd4b729e48d63fc4ace5e71cfcfc2aaebecedf1 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Tue, 4 Apr 2023 10:45:13 +0300
Subject: [PATCH] Increased resolution responsiveness for My Collections

---
 pages/collections/myCollections.tsx | 32 ++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/pages/collections/myCollections.tsx b/pages/collections/myCollections.tsx
index 7211d7d..46dc5da 100644
--- a/pages/collections/myCollections.tsx
+++ b/pages/collections/myCollections.tsx
@@ -85,7 +85,9 @@ const CollectionList: NextPage = () => {
           <div>
             {myStandardCollections.length > 0 && (
               <div className="bg-transparent">
-                <span className="text-2xl font-bold text-blue-300">Standard Collections</span>
+                <span className="ml-6 text-2xl font-bold text-blue-300 underline underline-offset-4">
+                  Standard Collections
+                </span>
                 <table className="table w-full">
                   <thead>
                     <tr>
@@ -98,7 +100,7 @@ const CollectionList: NextPage = () => {
                     {myStandardCollections.map((collection: any, index: any) => {
                       return (
                         <tr key={index}>
-                          <td className="w-[55%] bg-black">
+                          <td className="w-[40%] bg-black">
                             <div className="flex items-center space-x-3">
                               <div className="avatar">
                                 <div className="w-28 h-28 mask mask-squircle">
@@ -115,12 +117,16 @@ const CollectionList: NextPage = () => {
                                 </div>
                               </div>
                               <div className="pl-2">
-                                <p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p>
-                                <p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p>
+                                <p className="overflow-auto font-bold lg:max-w-[160px] xl:max-w-[220px] 2xl:max-w-xs no-scrollbar ">
+                                  {collection.name}
+                                </p>
+                                <p className="text-sm truncate opacity-50 lg:max-w-[160px] xl:max-w-[220px] 2xl:max-w-xs">
+                                  {collection.description}
+                                </p>
                               </div>
                             </div>
                           </td>
-                          <td className="w-[35%] bg-black">
+                          <td className="w-[50%] bg-black">
                             <div className="flex flex-row items-center space-x-3">
                               Minter:
                               <span className="ml-2">
@@ -188,7 +194,9 @@ const CollectionList: NextPage = () => {
             )}
             {myOneOfOneCollections.length > 0 && (
               <div className="mt-4">
-                <span className="text-2xl font-bold text-blue-300">1/1 Collections</span>
+                <span className="ml-6 text-2xl font-bold text-blue-300 underline underline-offset-4">
+                  1/1 Collections
+                </span>
                 <table className="table w-full">
                   <thead>
                     <tr>
@@ -201,7 +209,7 @@ const CollectionList: NextPage = () => {
                     {myOneOfOneCollections.map((collection: any, index: any) => {
                       return (
                         <tr key={index}>
-                          <td className="w-[55%] bg-black">
+                          <td className="w-[40%] bg-black">
                             <div className="flex items-center space-x-3">
                               <div className="avatar">
                                 <div className="w-28 h-28 mask mask-squircle">
@@ -218,12 +226,16 @@ const CollectionList: NextPage = () => {
                                 </div>
                               </div>
                               <div className="pl-2">
-                                <p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p>
-                                <p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p>
+                                <p className="overflow-auto font-bold lg:max-w-[160px] xl:max-w-[220px]  2xl:max-w-xs no-scrollbar ">
+                                  {collection.name}
+                                </p>
+                                <p className="text-sm truncate opacity-50  lg:max-w-[160px] xl:max-w-[220px] 2xl:max-w-xs">
+                                  {collection.description}
+                                </p>
                               </div>
                             </div>
                           </td>
-                          <td className="w-[35%] bg-black">
+                          <td className="w-[50%] bg-black">
                             <div className="flex flex-row items-center space-x-3">
                               Minter:
                               <span className="ml-2">