Tighten gallery filters and badge placement

resources/js/guest/components/FiltersBar.tsx

@@ -37,27 +37,29 @@ export default function FiltersBar({
   return (
     <div
       className={cn(
-        'flex gap-2 overflow-x-auto px-4 pb-2 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        'flex overflow-x-auto px-1 pb-2 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
         className,
       )}
       style={styleOverride}
     >
-      {filters.map((filter) => (
+      <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-2 rounded-full border px-4 py-2 transition',
+              'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
               value === filter.value
-              ? 'border-pink-500 bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow'
-              : 'border-transparent bg-white/70 text-muted-foreground hover:border-pink-200',
+                ? 'bg-pink-500 text-white shadow'
+                : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
             )}
           >
-          {filter.icon}
-          {t(filter.labelKey)}
+            {React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
+            <span className="whitespace-nowrap">{t(filter.labelKey)}</span>
           </button>
         ))}
       </div>
+    </div>
   );
 }

resources/js/guest/pages/GalleryPage.tsx

@@ -327,24 +327,28 @@ export default function GalleryPage() {
                     <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>
+                      <span
+                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${badgeEmphasisClass}`}
+                        style={{ borderRadius: radius }}
+                      >
+                        {newPhotosBadgeText}
+                      </span>
+                    </div>
                     <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
                   </div>
                 </div>
 
-                {newCount > 0 ? (
+                {newCount > 0 && (
                   <button
                     type="button"
                     onClick={acknowledgeNew}
-                    className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
+                    className="inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold text-pink-600 transition hover:bg-pink-50"
                     style={{ borderRadius: radius }}
                   >
-                    {newPhotosBadgeText}
+                    {t('galleryPage.badge.markSeen', 'Gesehen')}
                   </button>
-                ) : (
-                  <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
-                    {newPhotosBadgeText}
-                  </span>
                 )}
               </div>
               <div className="mt-4">