changes and improvements

components/Modal/Link/LinkDetails.tsx

@@ -116,12 +116,12 @@ export default function LinkDetails({ link }: Props) {
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {!imageError && (
-        <div id="link-banner" className="link-banner h-40 -mx-5 -mt-5 relative">
+        <div id="link-banner" className="link-banner h-44 -mx-5 -mt-5 relative">
           <div id="link-banner-inner" className="link-banner-inner"></div>
         </div>
       )}
       <div
-        className={`relative flex gap-5 items-start ${!imageError && "-mt-16"}`}
+        className={`relative flex gap-5 items-start ${!imageError && "-mt-32"}`}
       >
         {!imageError && (
           <Image
@@ -167,7 +167,7 @@ export default function LinkDetails({ link }: Props) {
       <div className="flex gap-1 items-center flex-wrap">
         <Link
           href={`/collections/${link.collection.id}`}
-          className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2"
+          className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
         >
           <FontAwesomeIcon
             icon={faFolder}
@@ -182,7 +182,7 @@ export default function LinkDetails({ link }: Props) {
           </p>
         </Link>
         {link.tags.map((e, i) => (
-          <Link key={i} href={`/tags/${e.id}`}>
+          <Link key={i} href={`/tags/${e.id}`} className="z-10">
             <p
               title={e.name}
               className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"

components/Modal/Link/index.tsx

@@ -7,6 +7,7 @@ type Props =
   | {
       toggleLinkModal: Function;
       method: "CREATE";
+      isOwner?: boolean;
       activeLink?: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
       className?: string;
@@ -14,6 +15,7 @@ type Props =
   | {
       toggleLinkModal: Function;
       method: "UPDATE";
+      isOwner: boolean;
       activeLink: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
       className?: string;
@@ -23,6 +25,7 @@ export default function CollectionModal({
   className,
   defaultIndex,
   toggleLinkModal,
+  isOwner,
   activeLink,
   method,
 }: Props) {
@@ -32,8 +35,12 @@ export default function CollectionModal({
         {method === "CREATE" && (
           <p className="text-xl text-sky-500 text-center">New Link</p>
         )}
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
-          {method === "UPDATE" && (
+        <Tab.List
+          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600 ${
+            isOwner ? "" : "pb-8"
+          }`}
+        >
+          {method === "UPDATE" && isOwner && (
             <>
               <Tab
                 className={({ selected }) =>

components/Modal/index.tsx

@@ -19,7 +19,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-2"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 z-20 p-2"
           >
             <FontAwesomeIcon
               icon={faChevronLeft}