From bc77abbd8bd7a244516da145c269c3e0a52351c9 Mon Sep 17 00:00:00 2001
From: Garret Patti <42485635+garretpatti@users.noreply.github.com>
Date: Sun, 5 Apr 2026 16:03:51 -0400
Subject: [PATCH] scaling tweaks

---
 src/components/mixed/ImageLightbox.tsx    | 30 ++++++++++---------
 src/components/mixed/VideoPlayerModal.tsx | 36 +++++++++++++----------
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/components/mixed/ImageLightbox.tsx b/src/components/mixed/ImageLightbox.tsx
index e846d32..7db86f5 100644
--- a/src/components/mixed/ImageLightbox.tsx
+++ b/src/components/mixed/ImageLightbox.tsx
@@ -36,12 +36,12 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
       onClick={handleOverlayClick}
     >
       {/* Toolbar */}
-      <div className={`flex items-center justify-between w-full ${showTags ? '' : 'max-w-4xl'}`}>
+      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
         <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
           {name}
         </span>
@@ -80,20 +80,20 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
       </div>
 
       {showTags ? (
-        <div className="flex gap-4 w-full flex-1 min-h-0 items-start">
+        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden max-h-full">
           {/* Image */}
-          <div className="flex-1 min-w-0 flex items-center justify-center">
+          <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-screen">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={url}
               alt={name}
-              className="max-w-full max-h-full object-contain rounded-lg"
+              className="object-contain rounded-lg"
               onClick={(e) => e.stopPropagation()}
             />
           </div>
           {/* Tag panel */}
           <div
-            className="w-80 flex-shrink-0 rounded-xl overflow-y-auto max-h-[80vh] p-4"
+            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4"
             style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
             onClick={(e) => e.stopPropagation()}
           >
@@ -104,13 +104,15 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
           </div>
         </div>
       ) : (
-        /* eslint-disable-next-line @next/next/no-img-element */
-        <img
-          src={url}
-          alt={name}
-          className="max-w-full max-h-[80vh] object-contain rounded-lg"
-          onClick={(e) => e.stopPropagation()}
-        />
+        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={url}
+            alt={name}
+            className="max-w-full max-h-full object-contain rounded-lg"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
       )}
     </div>
   )
diff --git a/src/components/mixed/VideoPlayerModal.tsx b/src/components/mixed/VideoPlayerModal.tsx
index 02dfaa9..a0476cc 100644
--- a/src/components/mixed/VideoPlayerModal.tsx
+++ b/src/components/mixed/VideoPlayerModal.tsx
@@ -36,12 +36,12 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
       onClick={handleOverlayClick}
     >
       {/* Toolbar */}
-      <div className={`flex items-center justify-between w-full ${showTags ? '' : 'max-w-4xl'}`}>
+      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
         <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
           {name}
         </span>
@@ -80,21 +80,23 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
       </div>
 
       {showTags ? (
-        <div className="flex gap-4 w-full flex-1 min-h-0 items-start">
+        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden">
           {/* Video */}
-          <div className="flex-1 min-w-0 flex items-center justify-center">
+          <div className="flex-1 min-w-0 min-h-0 flex items-center justify-center max-h-full">
             <video
               src={url}
               controls
               autoPlay
-              className="w-full max-h-full rounded-lg"
+              muted
+              loop
+              className="w-full h-full object-contain rounded-lg"
               style={{ backgroundColor: '#000' }}
               onClick={(e) => e.stopPropagation()}
             />
           </div>
           {/* Tag panel */}
           <div
-            className="w-80 flex-shrink-0 rounded-xl overflow-y-auto max-h-[80vh] p-4"
+            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4"
             style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
             onClick={(e) => e.stopPropagation()}
           >
@@ -105,14 +107,18 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
           </div>
         </div>
       ) : (
-        <video
-          src={url}
-          controls
-          autoPlay
-          className="w-full max-w-4xl max-h-[80vh] rounded-lg"
-          style={{ backgroundColor: '#000' }}
-          onClick={(e) => e.stopPropagation()}
-        />
+        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
+          <video
+            src={url}
+            controls
+            autoPlay
+            muted
+            loop
+            className="w-full h-full max-w-4xl object-contain rounded-lg"
+            style={{ backgroundColor: '#000' }}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
       )}
     </div>
   )