Tighten gallery spacing and add filter dividers

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) => (
+        {filters.map((filter, index) => {
-          <button
+          const isActive = value === filter.value;
-            key={filter.value}
+          return (
-            type="button"
+            <div key={filter.value} className="flex items-center">
-            onClick={() => onChange(filter.value)}
+              <button
-            className={cn(
+                type="button"
-              'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
+                onClick={() => onChange(filter.value)}
-              value === filter.value
+                className={cn(
-                ? 'bg-pink-500 text-white shadow'
+                  'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
-                : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
+                  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>
+                {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>
   );

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