From e05ee3b18661abcd3966064a22502ba4a9ff0999 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Wed, 14 Jan 2026 13:53:35 +0100
Subject: [PATCH] Unify gallery header and grid section

---
 resources/js/guest/pages/GalleryPage.tsx | 26 +++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/resources/js/guest/pages/GalleryPage.tsx b/resources/js/guest/pages/GalleryPage.tsx
index 860a6ef..b4bfa44 100644
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -315,12 +315,12 @@ export default function GalleryPage() {
           releaseLabel={t('common.releaseToRefresh')}
           refreshingLabel={t('common.refreshing')}
         >
-          <motion.div className="space-y-3 px-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
-            <motion.div
-              className="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"
-              style={{ borderRadius: radius }}
-              {...fadeUpMotion}
-            >
+          <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"
+            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 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 }}>
@@ -347,7 +347,6 @@ export default function GalleryPage() {
                   </span>
                 )}
               </div>
-
               <div className="mt-4">
                 <FiltersBar
                   value={filter}
@@ -358,13 +357,12 @@ export default function GalleryPage() {
                 />
               </div>
             </motion.div>
-          </motion.div>
-          {loading && (
-            <motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
-              {t('galleryPage.loading', 'Lade…')}
-            </motion.p>
-          )}
-          <motion.div className="grid grid-cols-2 gap-3 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
+            {loading && (
+              <motion.p className="px-1" {...fadeUpMotion}>
+                {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}>
             {list.map((p: GalleryPhoto) => {
               const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
               const createdLabel = p.created_at