From 39bd815ff0d7bc64193c1f408f8fb0fd599bd79b Mon Sep 17 00:00:00 2001
From: Garret Patti <42485635+garretpatti@users.noreply.github.com>
Date: Wed, 20 May 2026 17:14:51 -0400
Subject: [PATCH] fix centering issue in media viewer

---
 .../components/MediaViewer/MediaViewer.tsx    | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/MediaViewer/MediaViewer.tsx b/frontend/src/components/MediaViewer/MediaViewer.tsx
index fa4fe74..ac91688 100644
--- a/frontend/src/components/MediaViewer/MediaViewer.tsx
+++ b/frontend/src/components/MediaViewer/MediaViewer.tsx
@@ -11,6 +11,9 @@ interface Props {
 }
 
 export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
+  const TAG_PANEL_WIDTH = 260;
+  const EDGE_GAP = 16;
+  const BASE_CARD_TRANSFORM = "translate(-50%, -50%)";
   const [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
   const touchStartX = useRef<number | null>(null);
   const touchStartY = useRef<number | null>(null);
@@ -26,15 +29,16 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
   const currentIndex = mediaSiblings.findIndex((e) => e.media_item_id === mediaId);
   const prevId = currentIndex > 0 ? mediaSiblings[currentIndex - 1].media_item_id : null;
   const nextId = currentIndex < mediaSiblings.length - 1 ? mediaSiblings[currentIndex + 1].media_item_id : null;
+  const cardCenterX = showTags ? `calc((100vw - ${TAG_PANEL_WIDTH}px) / 2)` : "50%";
 
   // Clear inline styles when a new item loads so the card appears cleanly
   useEffect(() => {
     if (contentRef.current) {
       contentRef.current.style.transition = "";
-      contentRef.current.style.transform = "";
-      contentRef.current.style.opacity = "";
+      contentRef.current.style.transform = BASE_CARD_TRANSFORM;
+      contentRef.current.style.opacity = "1";
     }
-  }, [mediaId]);
+  }, [mediaId, BASE_CARD_TRANSFORM]);
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
@@ -80,8 +84,8 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
         swipeAxis.current = null;
         if (contentRef.current) {
           contentRef.current.style.transition = "";
-          contentRef.current.style.transform = "";
-          contentRef.current.style.opacity = "";
+          contentRef.current.style.transform = BASE_CARD_TRANSFORM;
+          contentRef.current.style.opacity = "1";
         }
         return;
       }
@@ -110,8 +114,8 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
           setTimeout(() => {
             if (contentRef.current) {
               contentRef.current.style.transition = "";
-              contentRef.current.style.transform = "";
-              contentRef.current.style.opacity = "";
+              contentRef.current.style.transform = BASE_CARD_TRANSFORM;
+              contentRef.current.style.opacity = "1";
             }
           }, 260);
         }
@@ -128,7 +132,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       window.removeEventListener("touchmove", onTouchMove);
       window.removeEventListener("touchend", onTouchEnd);
     };
-  }, [prevId, nextId, onClose, onNavigate]);
+  }, [prevId, nextId, onClose, onNavigate, BASE_CARD_TRANSFORM]);
 
   return (
     <>
@@ -151,7 +155,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       <button
         onClick={() => nextId && onNavigate(nextId)}
         disabled={!nextId}
-        style={{ position: "fixed", right: showTags ? 276 : 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
+        style={{ position: "fixed", right: showTags ? TAG_PANEL_WIDTH + EDGE_GAP : EDGE_GAP, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
       >
         ›
       </button>
@@ -160,7 +164,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       <div
         ref={contentRef}
         onClick={(e) => e.stopPropagation()}
-        style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 101, background: "#1a1a1a", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, maxWidth: "80vw", maxHeight: "90vh", overflow: "auto" }}
+        style={{ position: "fixed", top: "50%", left: cardCenterX, transform: BASE_CARD_TRANSFORM, zIndex: 101, background: "#1a1a1a", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, maxWidth: "80vw", maxHeight: "90vh", overflow: "auto" }}
       >
         {item?.filename && (
           <div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
@@ -201,7 +205,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       {showTags && item && (
         <div
           onClick={(e) => e.stopPropagation()}
-          style={{ position: "fixed", top: 0, right: 0, height: "100%", width: 260, background: "#1a1a1a", borderLeft: "1px solid #333", padding: "48px 16px 16px", zIndex: 101, overflowY: "auto" }}
+          style={{ position: "fixed", top: 0, right: 0, height: "100%", width: TAG_PANEL_WIDTH, background: "#1a1a1a", borderLeft: "1px solid #333", padding: "48px 16px 16px", zIndex: 101, overflowY: "auto" }}
         >
           <TagPanel item={item} />
         </div>