From 801e1f81d93c2ec2220dd823a2f8cec4643446b1 Mon Sep 17 00:00:00 2001
From: paul <paul-nothaft@hotmail.de>
Date: Tue, 15 Jul 2025 17:09:37 +0200
Subject: [PATCH] fix: improve gallery lightbox UI for better user experience
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed photo filename display from lightbox for cleaner viewing
- Fixed z-index layering to ensure controls always appear above images
- Changed control elements from z-10 to z-20 for proper visibility
- Set image container to z-0 to prevent overlap with controls
- Ensures all buttons remain accessible regardless of image size or zoom

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .gitea/workflows/mirror-to-github.yml             |  3 +++
 frontend/src/components/gallery/PhotoLightbox.tsx | 13 ++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/.gitea/workflows/mirror-to-github.yml b/.gitea/workflows/mirror-to-github.yml
index fdfe664..86f1928 100644
--- a/.gitea/workflows/mirror-to-github.yml
+++ b/.gitea/workflows/mirror-to-github.yml
@@ -55,6 +55,9 @@ jobs:
           git rm -r --cached CLAUDE.md || true
           git rm -r --cached PRODUCTION_DEPLOYMENT_GUIDE.md || true
           git rm -r --cached logs/ || true
+          git rm -r --cached frontend/.claudedocs/ || true
+          git rm -r --cached test-maintenance.sh || true
+          git rm -r --cached storage/ || true
 
         
           # Commit the changes
diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx
index 928d274..997da32 100644
--- a/frontend/src/components/gallery/PhotoLightbox.tsx
+++ b/frontend/src/components/gallery/PhotoLightbox.tsx
@@ -162,7 +162,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
       {/* Close button */}
       <button
         onClick={onClose}
-        className="absolute top-4 right-4 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-10"
+        className="absolute top-4 right-4 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-20"
         aria-label="Close"
       >
         <X className="w-6 h-6 text-white" />
@@ -171,7 +171,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
       {/* Navigation buttons */}
       <button
         onClick={goToPrevious}
-        className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-10"
+        className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-20"
         aria-label="Previous photo"
       >
         <ChevronLeft className="w-6 h-6 text-white" />
@@ -179,20 +179,19 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
 
       <button
         onClick={goToNext}
-        className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-10"
+        className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-20"
         aria-label="Next photo"
       >
         <ChevronRight className="w-6 h-6 text-white" />
       </button>
 
       {/* Bottom toolbar */}
-      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 z-20">
         <div className="max-w-4xl mx-auto flex items-center justify-between">
           <div className="text-white">
             <p className="text-sm opacity-75">
               {currentIndex + 1} / {photos.length}
             </p>
-            <p className="font-medium">{currentPhoto.filename}</p>
           </div>
           
           <div className="flex items-center gap-2">
@@ -231,7 +230,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
 
       {/* Image container */}
       <div
-        className="absolute inset-0 flex items-center justify-center"
+        className="absolute inset-0 flex items-center justify-center z-0"
         onClick={handleImageClick}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
@@ -257,7 +256,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
       </div>
 
       {/* Touch/swipe indicators for mobile */}
-      <div className="absolute bottom-20 left-1/2 -translate-x-1/2 text-white text-sm opacity-50 pointer-events-none md:hidden">
+      <div className="absolute bottom-20 left-1/2 -translate-x-1/2 text-white text-sm opacity-50 pointer-events-none md:hidden z-20">
         Swipe to navigate
       </div>
     </div>