From 7416e975609e6adf751fe58de2979401e910b972 Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Fri, 3 Jul 2026 13:36:36 +0200
Subject: [PATCH] Fix grid overflow to 3 columns

---
 app/src/app/(tabs)/browse.tsx      | 19 ++++++++++++++-----
 app/src/components/ListingCard.tsx |  7 +++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/src/app/(tabs)/browse.tsx b/app/src/app/(tabs)/browse.tsx
index 480474f..7655ae2 100644
--- a/app/src/app/(tabs)/browse.tsx
+++ b/app/src/app/(tabs)/browse.tsx
@@ -25,12 +25,13 @@ export default function BrowseTab(): JSX.Element {
   const products = useMemo<Product[]>(() => {
     let result = [...PRODUCTS];
     if (inStockOnly) result = result.filter((product) => product.qty > 0);
-    if (currencyFilter !== "all") result = result.filter((product) => product.cur === currencyFilter);
+    if (currencyFilter !== "all")
+      result = result.filter((product) => product.cur === currencyFilter);
     if (search.trim()) {
       const query = search.trim().toLowerCase();
       result = result.filter(
         (product) =>
-          product.name.toLowerCase().includes(query) || product.desc.toLowerCase().includes(query),
+          product.name.toLowerCase().includes(query) || product.desc.toLowerCase().includes(query)
       );
     }
     if (sortMode === "priceLow") result.sort((a, b) => a.priceNum - b.priceNum);
@@ -118,7 +119,11 @@ export default function BrowseTab(): JSX.Element {
                   viewMode === "list" ? "bg-accent" : ""
                 }`}
               >
-                <Ionicons name="list" size={14} color={viewMode === "list" ? accentForeground : mutedColor} />
+                <Ionicons
+                  name="list"
+                  size={14}
+                  color={viewMode === "list" ? accentForeground : mutedColor}
+                />
               </Pressable>
               <Pressable
                 onPress={() => setViewMode("grid")}
@@ -126,7 +131,11 @@ export default function BrowseTab(): JSX.Element {
                   viewMode === "grid" ? "bg-accent" : ""
                 }`}
               >
-                <Ionicons name="grid" size={14} color={viewMode === "grid" ? accentForeground : mutedColor} />
+                <Ionicons
+                  name="grid"
+                  size={14}
+                  color={viewMode === "grid" ? accentForeground : mutedColor}
+                />
               </Pressable>
             </View>
           </View>
@@ -142,7 +151,7 @@ export default function BrowseTab(): JSX.Element {
               ))}
             </View>
           ) : (
-            <View className="flex-row flex-wrap">
+            <View className="flex-row flex-wrap gap-5 lg:gap-6">
               {products.map((product) => (
                 <ListingCard key={product.id} product={product} variant="grid" />
               ))}
diff --git a/app/src/components/ListingCard.tsx b/app/src/components/ListingCard.tsx
index ca8d878..203adbc 100644
--- a/app/src/components/ListingCard.tsx
+++ b/app/src/components/ListingCard.tsx
@@ -103,13 +103,16 @@ export function ListingCard({ product, variant = "grid" }: ListingCardProps): JS
       onPress={openListing}
       onHoverIn={() => setIsHovered(true)}
       onHoverOut={() => setIsHovered(false)}
-      className="w-full p-1.5 md:w-1/2 lg:w-1/4"
+      className="w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-18px)]"
     >
       <Surface
         variant="default"
         className={`gap-0 overflow-hidden rounded-xl border p-0 ${isHovered ? "border-border-secondary" : "border-border"}`}
       >
-        <View className="aspect-[4/3] items-center justify-center" style={{ backgroundColor: product.bg }}>
+        <View
+          className="aspect-[4/3] items-center justify-center"
+          style={{ backgroundColor: product.bg }}
+        >
           <CardHighlightOverlay gradientId={`card-highlight-${product.id}`} />
           <Typography className="text-6xl lg:text-7xl">{product.emoji}</Typography>
         </View>