many more improvements to the PWA

components/LinkViews/Layouts/CardView.tsx

@@ -9,7 +9,14 @@ export default function CardView({
   return (
     <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
       {links.map((e, i) => {
-        return <LinkCard key={i} link={e} count={i} />;
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+          />
+        );
       })}
     </div>
   );

components/LinkViews/Layouts/ListView.tsx

@@ -9,7 +9,14 @@ export default function ListView({
   return (
     <div className="flex flex-col">
       {links.map((e, i) => {
-        return <LinkList key={i} link={e} count={i} />;
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+          />
+        );
       })}
     </div>
   );

components/LinkViews/LinkCard.tsx

@@ -21,9 +21,15 @@ type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
+  flipDropdown?: boolean;
 };
 
-export default function LinkGrid({ link, count, className }: Props) {
+export default function LinkGrid({
+  link,
+  count,
+  className,
+  flipDropdown,
+}: Props) {
   const { collections } = useCollectionStore();
 
   const { links, getLink } = useLinkStore();
@@ -199,6 +205,7 @@ export default function LinkGrid({ link, count, className }: Props) {
         position="top-[10.75rem] right-3"
         toggleShowInfo={() => setShowInfo(!showInfo)}
         linkInfo={showInfo}
+        flipDropdown={flipDropdown}
       />
     </div>
   );

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -18,6 +18,7 @@ type Props = {
   position?: string;
   toggleShowInfo?: () => void;
   linkInfo?: boolean;
+  flipDropdown?: boolean;
 };
 
 export default function LinkActions({
@@ -25,6 +26,7 @@ export default function LinkActions({
   toggleShowInfo,
   position,
   linkInfo,
+  flipDropdown,
 }: Props) {
   const permissions = usePermissions(link.collection.id as number);
 
@@ -65,9 +67,9 @@ export default function LinkActions({
   return (
     <>
       <div
-        className={`dropdown dropdown-end dropdown-bottom absolute ${
-          position || "top-3 right-3"
-        } z-20`}
+        className={`dropdown dropdown-end dropdown-${
+          flipDropdown ? "top" : "bottom"
+        } absolute ${position || "top-3 right-3"} z-20`}
       >
         <div
           tabIndex={0}

components/LinkViews/LinkList.tsx

@@ -17,9 +17,15 @@ type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
+  flipDropdown?: boolean;
 };
 
-export default function LinkCardCompact({ link, count, className }: Props) {
+export default function LinkCardCompact({
+  link,
+  count,
+  className,
+  flipDropdown,
+}: Props) {
   const { collections } = useCollectionStore();
 
   const { links } = useLinkStore();
@@ -95,6 +101,7 @@ export default function LinkCardCompact({ link, count, className }: Props) {
           link={link}
           collection={collection}
           position="top-3 right-3"
+          flipDropdown={flipDropdown}
           // toggleShowInfo={() => setShowInfo(!showInfo)}
           // linkInfo={showInfo}
         />