small improvements

components/LinkDetails.tsx

@@ -135,16 +135,15 @@ export default function LinkDetails({ className, link }: Props) {
 
           <p className="text-sm mb-2 text-neutral">{t("link")}</p>
 
-          <div className="rounded-lg p-2 bg-base-200 flex justify-between items-center gap-2">
-            <Link
-              href={link.url}
-              title={link.url}
-              target="_blank"
-              className="truncate"
-            >
-              {link.url}
-            </Link>
-            <CopyButton text={link.url} />
+          <div className="relative">
+            <div className="rounded-lg p-2 bg-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14">
+              <Link href={link.url} title={link.url} target="_blank">
+                {link.url}
+              </Link>
+              <div className="absolute right-0 px-2 bg-base-200">
+                <CopyButton text={link.url} />
+              </div>
+            </div>
           </div>
         </>
       )}
@@ -153,20 +152,24 @@ export default function LinkDetails({ className, link }: Props) {
 
       <p className="text-sm mb-2 text-neutral">{t("collection")}</p>
 
-      <Link
-        href={
-          isPublicRoute
-            ? `/public/collections/${link.collection.id}`
-            : `/collections/${link.collection.id}`
-        }
-        className="rounded-lg p-2 bg-base-200 flex justify-between items-center gap-2"
-      >
-        <p className="truncate">{link.collection.name}</p>
-        <i
-          className="bi-folder-fill text-xl"
-          style={{ color: link.collection.color }}
-        ></i>
-      </Link>
+      <div className="relative">
+        <Link
+          href={
+            isPublicRoute
+              ? `/public/collections/${link.collection.id}`
+              : `/collections/${link.collection.id}`
+          }
+          className="rounded-lg p-2 bg-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14"
+        >
+          <p>{link.collection.name}</p>
+          <div className="absolute right-0 px-2 bg-base-200">
+            <i
+              className="bi-folder-fill text-xl"
+              style={{ color: link.collection.color }}
+            ></i>
+          </div>
+        </Link>
+      </div>
 
       {link.tags[0] && (
         <>

components/ModalContent/LinkDetailModal.tsx

@@ -117,7 +117,7 @@ export default function LinkDetailModal({ onClose, onEdit, link }: Props) {
         className="bi-box-arrow-up-right text-xl text-neutral btn btn-sm btn-square btn-ghost absolute top-3 right-3 select-none"
       ></Link>
 
-      <div className="sm:m-auto sm:w-5/6">
+      <div className="sm:m-auto p-10 w-full max-w-xl">
         <LinkDetails link={link} />
 
         {permissions === true ||

pages/links/[id].tsx

@@ -17,14 +17,14 @@ const Index = () => {
   }, []);
 
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen py-20">
       {getLink.data ? (
         <LinkDetails
           link={getLink.data}
-          className="mx-auto max-w-2xl p-5 m-auto w-full"
+          className="max-w-xl p-5 m-auto w-full"
         />
       ) : (
-        <div className="mx-auto max-w-2xl p-5 m-auto w-full flex flex-col items-center gap-5">
+        <div className="max-w-xl p-5 m-auto w-full flex flex-col items-center gap-5">
           <div className="w-20 h-20 skeleton rounded-xl"></div>
           <div className="w-full h-10 skeleton rounded-xl"></div>
           <div className="w-full h-10 skeleton rounded-xl"></div>

pages/public/links/[id].tsx

@@ -17,14 +17,14 @@ const Index = () => {
   }, []);
 
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen py-20">
       {getLink.data ? (
         <LinkDetails
           link={getLink.data}
-          className="mx-auto max-w-2xl p-5 m-auto w-full"
+          className="max-w-xl p-5 m-auto w-full"
         />
       ) : (
-        <div className="mx-auto max-w-2xl p-5 m-auto w-full flex flex-col items-center gap-5">
+        <div className="max-w-xl p-5 m-auto w-full flex flex-col items-center gap-5">
           <div className="w-20 h-20 skeleton rounded-xl"></div>
           <div className="w-full h-10 skeleton rounded-xl"></div>
           <div className="w-full h-10 skeleton rounded-xl"></div>