From b0df2f13fa7f727f4a11a6c9fc10c6b9d1b02b1e Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sat, 1 Aug 2026 19:01:16 +0000
Subject: [PATCH] Fix shop filter spacing: consistent checkbox gaps, more room
 below mobile filter bar

CategoryFilter used gap-4 between the category group and the
availability checkbox but gap-2 within the category list itself,
reading as uneven spacing. ProductGrid's <lg filter bar only had
pb-6 before the product grid.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/shop/components/CategoryFilter.tsx | 2 +-
 app/shop/components/ProductGrid.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/shop/components/CategoryFilter.tsx b/app/shop/components/CategoryFilter.tsx
index ec5ac2f..722788f 100644
--- a/app/shop/components/CategoryFilter.tsx
+++ b/app/shop/components/CategoryFilter.tsx
@@ -41,7 +41,7 @@ export function CategoryFilter({ categories }: { categories: string[] }) {
   }
 
   return (
-    <div className="flex flex-col gap-4 w-full">
+    <div className="flex flex-col gap-2 w-full">
       {categories.length > 1 && (
         <div className="flex flex-col gap-2 w-full">
           <p className="font-bold text-body-sm text-text-primary">Kategorie</p>
diff --git a/app/shop/components/ProductGrid.tsx b/app/shop/components/ProductGrid.tsx
index b2ef122..1e3d704 100644
--- a/app/shop/components/ProductGrid.tsx
+++ b/app/shop/components/ProductGrid.tsx
@@ -80,7 +80,7 @@ export async function ProductGrid({
           as before. lg+: they move into a left sidebar instead (see aside
           below), so this is hidden there to avoid rendering twice. */}
       {hasSidebarFilter && (
-        <div className="lg:hidden flex flex-col gap-4 pb-6">
+        <div className="lg:hidden flex flex-col gap-4 pb-10">
           <PriceRangeFilter catalogMin={catalogMin} catalogMax={catalogMax} />
           <CategoryFilter categories={allCategories} />
         </div>