thesn/volana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix grid overflow to 3 columns

Browse Source
This commit is contained in:
thesn10
2026-07-03 13:36:36 +02:00
parent 1b2f1ec0b4
commit 7416e97560
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/app/(tabs)/browse.tsx
View File

@@ -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" />
))}

7
app/src/components/ListingCard.tsx
View File

@@ -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>