diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx index ac9d60e..e14abef 100644 --- a/frontend/src/components/gallery/PhotoLightbox.tsx +++ b/frontend/src/components/gallery/PhotoLightbox.tsx @@ -311,13 +311,17 @@ export const PhotoLightbox: React.FC = ({ `fixed inset-0 bg-black z-50 flex items-center justify-center protected-image protection-${protectionLevel}` : 'fixed inset-0 bg-black z-50 flex items-center justify-center'; + const desktopFeedbackWidth = 416; // 26rem; keep in sync with panel width + const isDesktopFeedback = showFeedback && !isSmallScreen; + return (
{/* Close button */} @@ -336,14 +340,17 @@ export const PhotoLightbox: React.FC = ({ onClick={goToNext} className="absolute top-1/2 -translate-y-1/2 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors z-30" aria-label="Next photo" - style={{ right: showFeedback && !isSmallScreen ? '26rem' : '1rem' }} + style={{ right: isDesktopFeedback ? `${desktopFeedbackWidth + 16}px` : '1rem' }} > ) : null} {/* Bottom toolbar */} -
+

@@ -441,7 +448,7 @@ export const PhotoLightbox: React.FC = ({ {/* Image container */}

= ({ onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} - style={{ cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default' }} + style={{ + cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default', + right: isDesktopFeedback ? `${desktopFeedbackWidth}px` : 0, + }} > = ({ {/* Feedback Panel */} {showFeedback && ( -
+

Photo Feedback

-
+