Merge pull request #721 from linkwarden/feat/customizable-links

small improvements

components/LinkDetails.tsx

@@ -135,17 +135,16 @@ 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"
-            >
+          <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>
 
+      <div className="relative">
         <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"
+          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 className="truncate">{link.collection.name}</p>
+          <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>