Match gallery preview filters and tiles to gallery

resources/js/guest/components/GalleryPreview.tsx

@@ -111,32 +111,32 @@ export default function GalleryPreview({ token }: Props) {
           </Link>
         </div>
 
-        <div className="flex gap-2 overflow-x-auto pb-1 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none]">
-          {filters.map((filter) => {
-            const isActive = mode === filter.value;
+        <div className="flex overflow-x-auto pb-1 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none]">
+          <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) => {
+              const isActive = mode === filter.value;
 
-            return (
-              <button
-                key={filter.value}
-                type="button"
-                onClick={() => setMode(filter.value)}
-                style={{
-                  borderRadius: radius,
-                  border: isActive ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
-                  background: isActive ? branding.primaryColor : undefined,
-                  boxShadow: isActive ? `0 8px 18px ${branding.primaryColor}33` : 'none',
-                }}
-                className={cn(
-                  'px-4 py-1 transition',
-                  isActive
-                    ? 'text-white'
-                    : 'bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70 dark:text-slate-100',
-                )}
-              >
-                {filter.label}
-              </button>
-            );
-          })}
+              return (
+                <div key={filter.value} className="flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => setMode(filter.value)}
+                    className={cn(
+                      'inline-flex items-center 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',
+                    )}
+                  >
+                    <span className="whitespace-nowrap">{filter.label}</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>
 
         {loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
@@ -147,43 +147,35 @@ export default function GalleryPreview({ token }: Props) {
           </div>
         )}
 
-        <div className="grid gap-2 grid-cols-2 md:grid-cols-3">
-        {items.map((p: PreviewPhoto) => (
-          <Link
-            key={p.id}
-            to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
-            className="group relative block overflow-hidden bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70"
-            style={{
-              borderRadius: radius,
-              border: `1px solid ${branding.primaryColor}22`,
-              boxShadow: `0 12px 26px ${branding.primaryColor}22`,
-            }}
-          >
-            <img
-              src={p.thumbnail_path || p.file_path}
-              alt={p.title || 'Foto'}
-              className="h-40 w-full object-cover transition duration-300 group-hover:scale-105"
-              loading="lazy"
-            />
-            <div
-              className="absolute inset-0"
-              style={{
-                background: `linear-gradient(180deg, transparent 50%, ${branding.primaryColor}33 100%)`,
-              }}
-              aria-hidden
-            />
-            <div className="absolute bottom-0 left-0 right-0 space-y-1 p-3">
-              <p className="text-sm font-semibold leading-tight line-clamp-2" style={headingFont ? { fontFamily: headingFont } : undefined}>
-                {p.title || getPhotoTitle(p)}
-              </p>
-              <div className="flex items-center gap-1 text-xs text-foreground/80">
-                <Heart className="h-4 w-4" style={{ color: branding.primaryColor }} aria-hidden />
-                {p.likes_count ?? 0}
+        <div className="grid gap-3 grid-cols-2 md:grid-cols-3">
+          {items.map((p: PreviewPhoto) => (
+            <Link
+              key={p.id}
+              to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
+              className="group flex flex-col overflow-hidden border border-border/60 bg-white shadow-sm ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-slate-950 dark:ring-white/10"
+              style={{ borderRadius: radius }}
+            >
+              <div className="relative">
+                <img
+                  src={p.thumbnail_path || p.file_path}
+                  alt={p.title || 'Foto'}
+                  className="aspect-[3/4] w-full object-cover transition duration-300 group-hover:scale-105"
+                  loading="lazy"
+                />
+                <div className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-black/50 via-black/0 to-transparent" aria-hidden />
               </div>
-            </div>
-          </Link>
-        ))}
-      </div>
+              <div className="space-y-2 px-3 pb-3 pt-3">
+                <p className="text-sm font-semibold leading-tight line-clamp-2 text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
+                  {p.title || getPhotoTitle(p)}
+                </p>
+                <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <Heart className="h-3.5 w-3.5 text-pink-500" aria-hidden />
+                  {p.likes_count ?? 0}
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
 
         <p className="text-center text-sm text-muted-foreground">
           Lust auf mehr?{' '}