implemented list view in other components as well

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -16,9 +16,11 @@ import useAccountStore from "@/store/account";
 export default function LinkActions({
   link,
   collection,
+  position,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
+  position?: string;
 }) {
   const permissions = usePermissions(link.collection.id as number);
 
@@ -62,7 +64,11 @@ export default function LinkActions({
       {permissions === true ||
       permissions?.canUpdate ||
       permissions?.canDelete ? (
-        <div className="dropdown dropdown-left absolute top-3 right-3 z-20">
+        <div
+          className={`dropdown dropdown-left absolute ${
+            position || "top-3 right-3"
+          } z-20`}
+        >
           <div
             tabIndex={0}
             role="button"

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -62,7 +62,7 @@ export default function LinkCard({ link, count, className }: Props) {
         className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
       >
         <div className="absolute bottom-3 right-3">
-          <LinkIcon link={link} className="w-12" />
+          <LinkIcon link={link} />
         </div>
 
         <div className="flex items-baseline gap-1">

components/LinkViews/LinkComponents/LinkCardGrid.tsx

@@ -53,7 +53,7 @@ export default function LinkCardGrid({ link, count, className }: Props) {
         className="flex items-center cursor-pointer p-3"
       >
         <div className="shrink-0">
-          <LinkIcon link={link} className="w-12" />
+          <LinkIcon link={link} width="w-12" />
         </div>
 
         <div className="w-[calc(100%-56px)] ml-2">

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -6,18 +6,18 @@ import isValidUrl from "@/lib/shared/isValidUrl";
 
 export default function LinkIcon({
   link,
-  className,
+  width,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
-  className?: string;
+  width?: string;
 }) {
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
 
   const iconClasses: string =
     "bg-white text-primary shadow rounded-md border-[2px] border-white select-none z-10" +
-      " " +
-      className || "";
+    " " +
+    (width || "w-12");
 
   return (
     <div>

components/LinkViews/LinkComponents/LinkRow.tsx

@@ -47,13 +47,13 @@ export default function LinkCardCompact({ link, count, className }: Props) {
 
   return (
     <>
-      <div className="border-neutral-content relative hover:bg-base-200 duration-200 rounded-lg">
+      <div className="border-neutral-content relative hover:bg-base-300 duration-200 rounded-lg">
         <div
           onClick={() => link.url && window.open(link.url || "", "_blank")}
-          className="flex items-center cursor-pointer p-3"
+          className="flex items-center cursor-pointer py-3 sm:px-3"
         >
           <div className="shrink-0">
-            <LinkIcon link={link} className="sm:w-12 w-8" />
+            <LinkIcon link={link} width="sm:w-12 w-8" />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">
@@ -79,7 +79,11 @@ export default function LinkCardCompact({ link, count, className }: Props) {
           </div>
         </div>
 
-        <LinkActions link={link} collection={collection} />
+        <LinkActions
+          link={link}
+          collection={collection}
+          position="top-3 right-0 sm:right-3"
+        />
       </div>
 
       <div className="divider my-0 last:hidden h-[1px]"></div>