From 719afb6920342e0a6d351051c77097f0b15e9796 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Wed, 14 Jan 2026 11:48:40 +0100
Subject: [PATCH] Refresh gallery layout and tile styling

---
 resources/js/guest/pages/GalleryPage.tsx | 225 ++++++++++++-----------
 1 file changed, 115 insertions(+), 110 deletions(-)

diff --git a/resources/js/guest/pages/GalleryPage.tsx b/resources/js/guest/pages/GalleryPage.tsx
index 9eb1c4f..bf1c240 100644
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -364,124 +364,129 @@ export default function GalleryPage() {
             {t('galleryPage.loading', 'Lade…')}
           </motion.p>
         )}
-        <motion.div className="grid grid-cols-2 gap-2 px-2 pb-16 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
-              ? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-              : t('galleryPage.photo.justNow', 'Gerade eben');
-            const likeCount = counts[p.id] ?? (p.likes_count || 0);
-            const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
-            const altSuffix = localizedTaskTitle
-              ? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
-              : '';
-            const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
+        <motion.section
+          className="mx-2 rounded-[28px] border border-border/60 bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.08),_transparent_55%)] p-2 shadow-sm dark:border-white/10 dark:bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.18),_transparent_60%)]"
+          {...fadeUpMotion}
+        >
+          <motion.div className="grid grid-cols-2 gap-3 pb-12 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
+                ? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                : t('galleryPage.photo.justNow', 'Gerade eben');
+              const likeCount = counts[p.id] ?? (p.likes_count || 0);
+              const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
+              const altSuffix = localizedTaskTitle
+                ? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
+                : '';
+              const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
 
-            const openPhoto = () => {
-              const index = list.findIndex((photo) => photo.id === p.id);
-              setCurrentPhotoIndex(index >= 0 ? index : null);
-            };
+              const openPhoto = () => {
+                const index = list.findIndex((photo) => photo.id === p.id);
+                setCurrentPhotoIndex(index >= 0 ? index : null);
+              };
 
-            return (
+              return (
+                <motion.div
+                  key={p.id}
+                  role="button"
+                  tabIndex={0}
+                  onClick={openPhoto}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      openPhoto();
+                    }
+                  }}
+                  className="group relative overflow-hidden border border-white/40 bg-white text-white shadow-md ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400 dark:border-white/10 dark:bg-slate-950 dark:ring-white/10"
+                  style={{ borderRadius: radius }}
+                  {...fadeScaleMotion}
+                >
+                  <img
+                    src={imageUrl}
+                    alt={altText}
+                    className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
+                    }}
+                    loading="lazy"
+                  />
+                  <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" aria-hidden />
+                  <div className="absolute inset-x-0 bottom-0 space-y-2 px-3 pb-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+                    {localizedTaskTitle && (
+                      <p
+                        className="text-sm font-semibold leading-tight line-clamp-2 text-white"
+                        style={headingFont ? { fontFamily: headingFont } : undefined}
+                      >
+                        {localizedTaskTitle}
+                      </p>
+                    )}
+                    <div className="flex flex-wrap items-center gap-2 text-[11px] text-white/90">
+                      <span className="rounded-full bg-white/15 px-2 py-1 backdrop-blur">{createdLabel}</span>
+                      <span className="rounded-full bg-white/10 px-2 py-1 backdrop-blur">
+                        {p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="absolute right-3 top-3 z-10 flex items-center gap-1 rounded-full border border-white/20 bg-black/50 p-1 backdrop-blur">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onShare(p);
+                      }}
+                      className={cn(
+                        'flex h-9 w-9 items-center justify-center text-white transition',
+                        shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
+                      )}
+                      aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
+                      disabled={shareTargetId === p.id}
+                      style={{
+                        borderRadius: radius,
+                        color: buttonStyle === 'outline' ? linkColor : undefined,
+                      }}
+                    >
+                      <Share2 className="h-4 w-4" aria-hidden />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onLike(p.id);
+                      }}
+                      className={cn(
+                        'flex items-center gap-1 px-3 py-1 text-sm font-medium transition',
+                        liked.has(p.id) ? 'text-pink-300' : 'text-white'
+                      )}
+                      aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
+                      style={{
+                        borderRadius: radius,
+                        color: buttonStyle === 'outline' ? linkColor : undefined,
+                      }}
+                    >
+                      <Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
+                      {likeCount}
+                    </button>
+                  </div>
+                </motion.div>
+              );
+            })}
+            {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
               <motion.div
-                key={p.id}
-                role="button"
-                tabIndex={0}
-                onClick={openPhoto}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    openPhoto();
-                  }
-                }}
-                className="group relative overflow-hidden border border-white/20 bg-gray-950 text-white shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400"
+                key={`placeholder-${idx}`}
+                className="relative overflow-hidden border border-muted/40 bg-white shadow-sm ring-1 ring-black/5 dark:bg-slate-950 dark:ring-white/10"
                 style={{ borderRadius: radius }}
                 {...fadeScaleMotion}
               >
-                <img
-                  src={imageUrl}
-                  alt={altText}
-                  className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
-                  onError={(e) => {
-                    (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
-                  }}
-                  loading="lazy"
-                />
-                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" aria-hidden />
-                <div className="absolute inset-x-0 bottom-0 space-y-2 px-3 pb-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
-                  {localizedTaskTitle && (
-                    <p
-                      className="text-sm font-semibold leading-tight line-clamp-2 text-white"
-                      style={headingFont ? { fontFamily: headingFont } : undefined}
-                    >
-                      {localizedTaskTitle}
-                    </p>
-                  )}
-                  <div className="flex flex-wrap items-center gap-2 text-[11px] text-white/90">
-                    <span className="rounded-full bg-white/15 px-2 py-1 backdrop-blur">{createdLabel}</span>
-                    <span className="rounded-full bg-white/10 px-2 py-1 backdrop-blur">
-                      {p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}
-                    </span>
-                  </div>
-                </div>
-                <div className="absolute right-3 top-3 z-10 flex items-center gap-1 rounded-full border border-white/20 bg-black/50 p-1 backdrop-blur">
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onShare(p);
-                    }}
-                    className={cn(
-                      'flex h-9 w-9 items-center justify-center text-white transition',
-                      shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
-                    )}
-                    aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
-                    disabled={shareTargetId === p.id}
-                    style={{
-                      borderRadius: radius,
-                      color: buttonStyle === 'outline' ? linkColor : undefined,
-                    }}
-                  >
-                    <Share2 className="h-4 w-4" aria-hidden />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onLike(p.id);
-                    }}
-                    className={cn(
-                      'flex items-center gap-1 px-3 py-1 text-sm font-medium transition',
-                      liked.has(p.id) ? 'text-pink-300' : 'text-white'
-                    )}
-                    aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
-                    style={{
-                      borderRadius: radius,
-                      color: buttonStyle === 'outline' ? linkColor : undefined,
-                    }}
-                  >
-                    <Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
-                    {likeCount}
-                  </button>
+                <div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
+                <div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
+                  <ImageIcon className="h-6 w-6" aria-hidden />
+                  <div className="h-2 w-10 rounded-full bg-muted/40" />
                 </div>
+                <div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
               </motion.div>
-            );
-          })}
-          {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
-            <motion.div
-              key={`placeholder-${idx}`}
-              className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm"
-              style={{ borderRadius: radius }}
-              {...fadeScaleMotion}
-            >
-              <div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
-              <div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
-                <ImageIcon className="h-6 w-6" aria-hidden />
-                <div className="h-2 w-10 rounded-full bg-muted/40" />
-              </div>
-              <div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
-            </motion.div>
-          ))}
-        </motion.div>
+            ))}
+          </motion.div>
+        </motion.section>
       </PullToRefresh>
       {currentPhotoIndex !== null && list.length > 0 && (
         <PhotoLightbox