From 9ba1f8bd56beed9ee1cac8f2439da1db8807368d Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Thu, 18 Dec 2025 09:52:07 +0100
Subject: [PATCH] fix: corect layout spacing and restore filter functionality

---
 src/components/BottleGrid.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/BottleGrid.tsx b/src/components/BottleGrid.tsx
index 75a3aec..c7186bd 100644
--- a/src/components/BottleGrid.tsx
+++ b/src/components/BottleGrid.tsx
@@ -36,7 +36,7 @@ function BottleCard({ bottle }: BottleCardProps) {
     const statusStyle = statusConfig[bottle.status as keyof typeof statusConfig] || statusConfig.sealed;
 
     return (
-        <Link href={`/ bottles / ${bottle.id} `} className="block h-full group">
+        <Link href={`/bottles/${bottle.id}`} className="block h-full group">
             <div className="h-full bg-white dark:bg-zinc-900 rounded-[2rem] overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-sm transition-all duration-300 hover:shadow-2xl hover:shadow-amber-900/10 hover:-translate-y-1 group-hover:border-amber-500/30">
                 <div className="aspect-[4/3] overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative">
                     <img
@@ -53,7 +53,7 @@ function BottleCard({ bottle }: BottleCardProps) {
                         </div>
                     )}
 
-                    <div className={`absolute bottom - 3 left - 3 px - 3 py - 1.5 rounded - xl text - [10px] font - black uppercase flex items - center gap - 2 backdrop - blur - md border shadow - lg ${statusStyle.color} `}>
+                    <div className={`absolute bottom-3 left-3 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase flex items-center gap-2 backdrop-blur-md border shadow-lg ${statusStyle.color}`}>
                         <StatusIcon size={12} />
                         {statusStyle.label}
                     </div>
@@ -70,8 +70,8 @@ function BottleCard({ bottle }: BottleCardProps) {
                                 </div>
                             )}
                         </div>
-                        <h3 className={`font - black text - xl leading - tight group - hover: text - amber - 600 transition - colors line - clamp - 2 min - h - [3.5rem] flex items - center ${bottle.is_whisky === false ? 'text-red-600 dark:text-red-400' : 'text-zinc-900 dark:text-zinc-100'
-                            } `}>
+                        <h3 className={`font-black text-xl leading-tight group-hover:text-amber-600 transition-colors line-clamp-2 min-h-[3.5rem] flex items-center ${bottle.is_whisky === false ? 'text-red-600 dark:text-red-400' : 'text-zinc-900 dark:text-zinc-100'
+                            }`}>
                             {bottle.name || 'Unbekannte Flasche'}
                         </h3>
                     </div>
@@ -142,7 +142,7 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                 return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
             }
         });
-    }, [bottles, searchQuery, selectedCategory, selectedDistillery, sortBy]);
+    }, [bottles, searchQuery, selectedCategory, selectedDistillery, selectedStatus, sortBy]);
 
     if (!bottles || bottles.length === 0) {
         return (
@@ -194,10 +194,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                         <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                             <button
                                 onClick={() => setSelectedCategory(null)}
-                                className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedCategory === null
+                                className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedCategory === null
                                     ? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20'
                                     : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
-                                    } `}
+                                    }`}
                             >
                                 ALLE
                             </button>
@@ -205,10 +205,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                                 <button
                                     key={cat}
                                     onClick={() => setSelectedCategory(cat)}
-                                    className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedCategory === cat
+                                    className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedCategory === cat
                                         ? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20'
                                         : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
-                                        } `}
+                                        }`}
                                 >
                                     {cat.toUpperCase()}
                                 </button>
@@ -222,10 +222,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                         <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                             <button
                                 onClick={() => setSelectedDistillery(null)}
-                                className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedDistillery === null
+                                className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedDistillery === null
                                     ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
                                     : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
-                                    } `}
+                                    }`}
                             >
                                 ALLE
                             </button>
@@ -233,10 +233,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                                 <button
                                     key={dist}
                                     onClick={() => setSelectedDistillery(dist)}
-                                    className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedDistillery === dist
+                                    className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedDistillery === dist
                                         ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
                                         : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
-                                        } `}
+                                        }`}
                                 >
                                     {dist.toUpperCase()}
                                 </button>
@@ -252,10 +252,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                                 <button
                                     key={status}
                                     onClick={() => setSelectedStatus(selectedStatus === status ? null : status)}
-                                    className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedStatus === status
+                                    className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedStatus === status
                                         ? status === 'open' ? 'bg-amber-500 border-amber-500 text-white' : status === 'sampled' ? 'bg-purple-500 border-purple-500 text-white' : status === 'empty' ? 'bg-zinc-500 border-zinc-500 text-white' : 'bg-blue-600 border-blue-600 text-white'
                                         : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
-                                        } `}
+                                        }`}
                                 >
                                     {status.toUpperCase()}
                                 </button>