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"
+      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)' }}
+      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 */
+        <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-[80vh] object-contain rounded-lg"
+            className="max-w-full max-h-full object-contain rounded-lg"
             onClick={(e) => e.stopPropagation()}
           />
+        </div>
       )}
     </div>
   )

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"
+      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)' }}
+      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>
       ) : (
+        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
           <video
             src={url}
             controls
             autoPlay
-          className="w-full max-w-4xl max-h-[80vh] rounded-lg"
+            muted
+            loop
+            className="w-full h-full max-w-4xl object-contain rounded-lg"
             style={{ backgroundColor: '#000' }}
             onClick={(e) => e.stopPropagation()}
           />
+        </div>
       )}
     </div>
   )