fix dashboard bug

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -12,14 +12,16 @@ import { useDeleteLink, useGetLink, useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
 import LinkModal from "@/components/ModalContent/LinkModal";
 import { useRouter } from "next/router";
+import clsx from "clsx";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   className?: string;
+  btnStyle?: string;
 };
 
-export default function LinkActions({ link, className }: Props) {
+export default function LinkActions({ link, className, btnStyle }: Props) {
   const { t } = useTranslation();
 
   const permissions = usePermissions(link.collection.id as number);
@@ -85,13 +87,17 @@ export default function LinkActions({ link, className }: Props) {
     <>
       {isPublicRoute ? (
         <div
-          className={`absolute ${className || "top-3 right-3"} z-20`}
+          className={clsx(
+            className || "top-3 right-3",
+            "absolute z-20",
+            btnStyle
+          )}
           tabIndex={0}
           role="button"
           onMouseDown={dropdownTriggerer}
           onClick={() => setLinkModal(true)}
         >
-          <div className="btn btn-ghost btn-sm btn-square text-neutral">
+          <div className="btn btn-sm btn-square text-neutral">
             <i title="More" className="bi-three-dots text-xl" />
           </div>
         </div>
@@ -105,7 +111,7 @@ export default function LinkActions({ link, className }: Props) {
             tabIndex={0}
             role="button"
             onMouseDown={dropdownTriggerer}
-            className="btn btn-sm btn-square text-neutral"
+            className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}
           >
             <i title="More" className="bi-three-dots text-xl" />
           </div>

components/LinkViews/LinkComponents/LinkList.tsx

@@ -93,7 +93,7 @@ export default function LinkCardCompact({ link, editMode }: Props) {
   return (
     <>
       <div
-        className={`${selectedStyle} rounded-md border relative items-center flex ${
+        className={`${selectedStyle} rounded-md border relative group items-center flex ${
           !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
         } duration-200 w-full`}
         onClick={() =>
@@ -137,7 +137,10 @@ export default function LinkCardCompact({ link, editMode }: Props) {
         <LinkActions
           link={link}
           collection={collection}
-          className="top-3 right-3"
+          className={
+            "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+          }
+          btnStyle="btn-ghost"
         />
       </div>
       <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>