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>

components/ViewDropdown.tsx

@@ -114,32 +114,36 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
               </label>
             </li>
           ))}
-        <p className="mb-1 mt-2 text-sm text-neutral">
-          {t("columns")}:{" "}
-          {settings.columns === 0 ? t("default") : settings.columns}
-        </p>
-        <div>
-          <input
-            type="range"
-            min={0}
-            max="8"
-            value={settings.columns}
-            onChange={(e) => onColumnsChange(e)}
-            className="range range-xs range-primary"
-            step="1"
-          />
-          <div className="flex w-full justify-between px-2 text-xs text-neutral">
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-          </div>
-        </div>
+        {settings.viewMode !== ViewMode.List && (
+          <>
+            <p className="mb-1 mt-2 text-sm text-neutral">
+              {t("columns")}:{" "}
+              {settings.columns === 0 ? t("default") : settings.columns}
+            </p>
+            <div>
+              <input
+                type="range"
+                min={0}
+                max="8"
+                value={settings.columns}
+                onChange={(e) => onColumnsChange(e)}
+                className="range range-xs range-primary"
+                step="1"
+              />
+              <div className="flex w-full justify-between px-2 text-xs text-neutral">
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+              </div>
+            </div>
+          </>
+        )}
       </ul>
     </div>
   );