From 23f4142414b07c53f03587e125628c828c5aa98c Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 15 Jan 2024 03:39:53 -0500
Subject: [PATCH] improved responsiveness

---
 components/LinkViews/LinkList.tsx             | 21 ++++++++-----------
 .../ModalContent/PreservedFormatsModal.tsx    |  5 +----
 layouts/MainLayout.tsx                        |  2 +-
 pages/dashboard.tsx                           | 10 +++------
 4 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index e4a91b0..67a75e3 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@@ -11,6 +11,7 @@ import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
 import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 import Link from "next/link";
+import { isPWA } from "@/lib/client/utils";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -52,16 +53,16 @@ export default function LinkCardCompact({ link, count, className }: Props) {
     <>
       <div
         className={`border-neutral-content relative ${
-          !showInfo ? "hover:bg-base-300" : ""
+          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
         } duration-200 rounded-lg`}
       >
         <Link
           href={link.url || ""}
           target="_blank"
-          className="flex items-center cursor-pointer py-3 px-3"
+          className="flex items-start cursor-pointer"
         >
           <div className="shrink-0">
-            <LinkIcon link={link} width="sm:w-12 w-8" />
+            <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">
@@ -70,16 +71,13 @@ export default function LinkCardCompact({ link, count, className }: Props) {
             </p>
 
             <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
                 {collection ? (
-                  <>
-                    <LinkCollection link={link} collection={collection} />
-                    &middot;
-                  </>
+                  <LinkCollection link={link} collection={collection} />
                 ) : undefined}
                 {link.url ? (
-                  <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
-                    <i className="bi-link-45deg text-base" />
+                  <div className="flex items-center gap-1 w-fit text-neutral truncate">
+                    <i className="bi-link-45deg text-lg" />
                     <p className="truncate w-full">{shortendURL}</p>
                   </div>
                 ) : (
@@ -87,9 +85,8 @@ export default function LinkCardCompact({ link, count, className }: Props) {
                     {link.type}
                   </div>
                 )}
+                <LinkDate link={link} />
               </div>
-              <span className="hidden sm:block">&middot;</span>
-              <LinkDate link={link} />
             </div>
           </div>
         </Link>
diff --git a/components/ModalContent/PreservedFormatsModal.tsx b/components/ModalContent/PreservedFormatsModal.tsx
index af3053c..5bc181d 100644
--- a/components/ModalContent/PreservedFormatsModal.tsx
+++ b/components/ModalContent/PreservedFormatsModal.tsx
@@ -217,10 +217,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             <i className="bi-box-arrow-up-right" />
           </Link>
           {link?.collection.ownerId === session.data?.user.id ? (
-            <div
-              className={`btn w-1/2 btn-outline`}
-              onClick={() => updateArchive()}
-            >
+            <div className={`btn btn-outline`} onClick={() => updateArchive()}>
               <div>
                 <p>Refresh Preserved Formats</p>
                 <p className="text-xs">
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index d1cf902..f0a9190 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -46,7 +46,7 @@ export default function MainLayout({ children }: Props) {
         </div>
 
         <div
-          className={`w-full flex flex-col min-h-${
+          className={`w-full pb-40 flex flex-col min-h-${
             showAnnouncement ? "full" : "screen"
           } lg:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
         >
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 991dd05..6fabf33 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -2,7 +2,6 @@ import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import useTagStore from "@/store/tags";
 import MainLayout from "@/layouts/MainLayout";
-import LinkCard from "@/components/LinkViews/LinkCard";
 import { useEffect, useState } from "react";
 import useLinks from "@/hooks/useLinks";
 import Link from "next/link";
@@ -279,14 +278,11 @@ export default function Dashboard() {
         >
           {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div className="w-full">
-              <div
-                className={`grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 w-full`}
-              >
-                {links
+              <LinkComponent
+                links={links
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
                   .slice(0, showLinks)}
-              </div>
+              />
             </div>
           ) : (
             <div