From d66019bfea9d8ec86d91b7a73196f2188e3a9d5e Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 25 Apr 2024 23:56:36 -0400
Subject: [PATCH] bug fixed

---
 components/LinkViews/Layouts/MasonryView.tsx | 21 +++++++++++++++++---
 components/MobileNavigation.tsx              |  4 ++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/LinkViews/Layouts/MasonryView.tsx b/components/LinkViews/Layouts/MasonryView.tsx
index 743dcd4..1caca9f 100644
--- a/components/LinkViews/Layouts/MasonryView.tsx
+++ b/components/LinkViews/Layouts/MasonryView.tsx
@@ -2,6 +2,9 @@ import LinkCard from "@/components/LinkViews/LinkCard";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { GridLoader } from "react-spinners";
 import Masonry from "react-masonry-css";
+import resolveConfig from "tailwindcss/resolveConfig";
+import tailwindConfig from "../../../tailwind.config.js";
+import { useMemo } from "react";
 
 export default function MasonryView({
   links,
@@ -12,11 +15,23 @@ export default function MasonryView({
   editMode?: boolean;
   isLoading?: boolean;
 }) {
+  const fullConfig = resolveConfig(tailwindConfig as any);
+
+  const breakpointColumnsObj = useMemo(() => {
+    return {
+      default: 4,
+      1900: 3,
+      [fullConfig.theme.screens.xl]: 2,
+      [fullConfig.theme.screens.sm]: 1,
+    };
+  }, []);
+
   return (
     <Masonry
-      breakpointCols={4}
-      columnClassName="!w-full flex flex-col gap-5"
-      className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5"
+      breakpointCols={breakpointColumnsObj}
+      columnClassName="flex flex-col gap-5 !w-full"
+      // className="grid gap-5 grid-cols-3"
+      className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 pb-5"
     >
       {links.map((e, i) => {
         return (
diff --git a/components/MobileNavigation.tsx b/components/MobileNavigation.tsx
index 02fa08a..e5cbbf7 100644
--- a/components/MobileNavigation.tsx
+++ b/components/MobileNavigation.tsx
@@ -1,4 +1,4 @@
-import { dropdownTriggerer, isIphone } from "@/lib/client/utils";
+import { dropdownTriggerer, isIphone, isPWA } from "@/lib/client/utils";
 import React from "react";
 import { useState } from "react";
 import NewLinkModal from "./ModalContent/NewLinkModal";
@@ -20,7 +20,7 @@ export default function MobileNavigation({}: Props) {
       >
         <div
           className={`w-full flex bg-base-100 ${
-            isIphone() ? "pb-5" : ""
+            isIphone() && isPWA() ? "pb-5" : ""
           } border-solid border-t-neutral-content border-t`}
         >
           <MobileNavigationButton href={`/dashboard`} icon={"bi-house"} />