From 3612c97e86d36f11712dd28a8640723d3220347b Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Wed, 14 Jan 2026 15:08:28 +0100
Subject: [PATCH] Tighten gallery spacing and add filter dividers

---
 resources/js/guest/components/FiltersBar.tsx | 39 ++++++++++++--------
 resources/js/guest/pages/GalleryPage.tsx     | 10 ++---
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/resources/js/guest/components/FiltersBar.tsx b/resources/js/guest/components/FiltersBar.tsx
index 2ddffe4..1ca92bc 100644
--- a/resources/js/guest/components/FiltersBar.tsx
+++ b/resources/js/guest/components/FiltersBar.tsx
@@ -43,22 +43,29 @@ export default function FiltersBar({
       style={styleOverride}
     >
       <div className="inline-flex items-center rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
-        {filters.map((filter, index) => (
-          <button
-            key={filter.value}
-            type="button"
-            onClick={() => onChange(filter.value)}
-            className={cn(
-              'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
-              value === filter.value
-                ? 'bg-pink-500 text-white shadow'
-                : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
-            )}
-          >
-            {React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
-            <span className="whitespace-nowrap">{t(filter.labelKey)}</span>
-          </button>
-        ))}
+        {filters.map((filter, index) => {
+          const isActive = value === filter.value;
+          return (
+            <div key={filter.value} className="flex items-center">
+              <button
+                type="button"
+                onClick={() => onChange(filter.value)}
+                className={cn(
+                  'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
+                  isActive
+                    ? 'bg-pink-500 text-white shadow'
+                    : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
+                )}
+              >
+                {React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
+                <span className="whitespace-nowrap">{t(filter.labelKey)}</span>
+              </button>
+              {index < filters.length - 1 && (
+                <span className="mx-1 h-4 w-px bg-border/60 dark:bg-white/10" aria-hidden />
+              )}
+            </div>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/resources/js/guest/pages/GalleryPage.tsx b/resources/js/guest/pages/GalleryPage.tsx
index bcfd924..6532201 100644
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -316,19 +316,19 @@ export default function GalleryPage() {
           refreshingLabel={t('common.refreshing')}
         >
           <motion.section
-            className="mx-2 space-y-4 rounded-3xl border border-pink-200/40 bg-white/90 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/80"
+            className="mx-0.5 space-y-2 rounded-3xl border border-pink-200/40 bg-white/90 p-2 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/80"
             style={bodyFont ? { fontFamily: bodyFont, borderRadius: radius } : { borderRadius: radius }}
             {...containerMotion}
           >
             <motion.div {...fadeUpMotion}>
-              <div className="flex flex-wrap items-start justify-between gap-4">
+              <div className="flex flex-wrap items-center justify-between gap-2">
                 <div className="flex items-center gap-3">
                   <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
                     <ImageIcon className="h-5 w-5" aria-hidden />
                   </div>
                   <div>
                     <div className="flex flex-wrap items-center gap-2">
-                      <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
+                      <h1 className="text-lg font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
                       <span
                         className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${badgeEmphasisClass}`}
                         style={{ borderRadius: radius }}
@@ -351,7 +351,7 @@ export default function GalleryPage() {
                   </button>
                 )}
               </div>
-              <div className="mt-4">
+              <div className="mt-2">
                 <FiltersBar
                   value={filter}
                   onChange={setFilter}
@@ -366,7 +366,7 @@ export default function GalleryPage() {
                 {t('galleryPage.loading', 'Lade…')}
               </motion.p>
             )}
-            <motion.div className="grid grid-cols-2 gap-3 pb-8 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
+            <motion.div className="grid grid-cols-2 gap-3 pb-6 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
             {list.map((p: GalleryPhoto) => {
               const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
               const createdLabel = p.created_at