bug fix

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -60,17 +60,13 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
     <>
       {isPublicRoute ? (
         <div
-          className={clsx(
-            className || "top-3 right-3",
-            "absolute z-20",
-            btnStyle
-          )}
+          className={clsx(className || "top-3 right-3 absolute z-20")}
           tabIndex={0}
           role="button"
           onMouseDown={dropdownTriggerer}
           onClick={() => setLinkModal(true)}
         >
-          <div className="btn btn-sm btn-square text-neutral">
+          <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
             <i title="More" className="bi-three-dots text-xl" />
           </div>
         </div>

components/LinkViews/LinkComponents/LinkList.tsx

@@ -19,6 +19,7 @@ import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useLinks } from "@/hooks/store/links";
 import useLocalSettingsStore from "@/store/localSettings";
+import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -134,11 +135,16 @@ export default function LinkCardCompact({ link, editMode }: Props) {
             </div>
           </div>
         </div>
+        <LinkPin
+          link={link}
+          className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+          btnStyle="btn-ghost"
+        />
         <LinkActions
           link={link}
           collection={collection}
           className={
-            "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+            "absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
           }
           btnStyle="btn-ghost"
         />

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -24,6 +24,7 @@ import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
 import useLocalSettingsStore from "@/store/localSettings";
 import clsx from "clsx";
+import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -246,6 +247,10 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
           "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
         }
       />
+      <LinkPin
+        link={link}
+        className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+      />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkPin.tsx

@@ -18,10 +18,10 @@ export default function LinkPin({ link, className, btnStyle }: Props) {
 
   return (
     <div
-      className={clsx(className || "top-3 right-3 absolute", btnStyle)}
+      className={clsx(className || "top-3 right-3 absolute")}
       onClick={() => pinLink(link)}
     >
-      <div className="btn btn-sm btn-square text-neutral">
+      <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
         <i
           title="Pin"
           className={clsx(