From 8838756c16702bf5ad408a3ebc5b3e11344f4418 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Tue, 18 Jul 2023 18:14:26 -0400
Subject: [PATCH] small improvements

---
 components/LinkCard.tsx                   | 8 ++++----
 components/Modal/Link/LinkDetails.tsx     | 2 +-
 components/Modal/User/ProfileSettings.tsx | 2 +-
 pages/collections/[id].tsx                | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index fa28756..4f286c9 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -143,18 +143,18 @@ export default function LinkCard({ link, count, className }: Props) {
           <div className="flex flex-col justify-between w-full">
             <div className="flex items-baseline gap-1">
               <p className="text-sm text-sky-400 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-500 font-bold truncate max-w-[10rem] capitalize">
+              <p className="text-lg text-sky-500 font-bold truncate capitalize w-full pr-8">
                 {link.name}
               </p>
             </div>
-            <div className="flex gap-3 items-center flex-wrap my-3">
-              <div className="flex items-center gap-1">
+            <div className="flex gap-3 items-center my-3">
+              <div className="flex items-center gap-1 w-full pr-20">
                 <FontAwesomeIcon
                   icon={faFolder}
                   className="w-4 h-4 mt-1 drop-shadow"
                   style={{ color: collection?.color }}
                 />
-                <p className="text-sky-900 truncate max-w-[10rem] capitalize">
+                <p className="text-sky-900 truncate capitalize">
                   {collection?.name}
                 </p>
               </div>
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 3d18233..1847c92 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -151,7 +151,7 @@ export default function LinkDetails({ link }: Props) {
           />
         )}
         <div className="flex flex-col gap- justify-end drop-shadow">
-          <p className="text-2xl text-sky-500 capitalize hyphens-auto">
+          <p className="text-2xl text-sky-500 capitalize break-words hyphens-auto">
             {link.name}
           </p>
           <Link
diff --git a/components/Modal/User/ProfileSettings.tsx b/components/Modal/User/ProfileSettings.tsx
index 57e81c4..3db24b6 100644
--- a/components/Modal/User/ProfileSettings.tsx
+++ b/components/Modal/User/ProfileSettings.tsx
@@ -124,7 +124,7 @@ export default function ProfileSettings({
               </div>
             )}
 
-            <div className="absolute -bottom-2 left-0 right-0 mx-auto w-fit text-center">
+            <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
               <label
                 htmlFor="upload-photo"
                 title="PNG or JPG (Max: 3MB)"
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 7c6d688..f47ed7f 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -59,7 +59,7 @@ export default function Index() {
                     style={{ color: activeCollection?.color }}
                     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 py-1">
+                  <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 break-words hyphens-auto">
                     {activeCollection?.name}
                   </p>
                 </div>