From aae3391ce862eaa5658b9a378db8ea772d217801 Mon Sep 17 00:00:00 2001
From: Dorian <z00york@mac.com>
Date: Sat, 11 Apr 2026 23:38:36 -0400
Subject: [PATCH] fix: fullscreen video in media lightbox

Video fills entire viewport with no padding/border-radius. Double-click
toggles native fullscreen. Reduced padding for all media types.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/cloud/MediaLightbox.vue    | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/neode-ui/src/components/cloud/MediaLightbox.vue b/neode-ui/src/components/cloud/MediaLightbox.vue
index 4515ceff..adc3d483 100644
--- a/neode-ui/src/components/cloud/MediaLightbox.vue
+++ b/neode-ui/src/components/cloud/MediaLightbox.vue
@@ -63,11 +63,13 @@
           <!-- Video -->
           <video
             v-else-if="currentItem && currentUrl && isVideoFile(currentItem)"
+            ref="videoEl"
             :src="currentUrl"
             :key="currentUrl"
             class="lightbox-media-video"
             controls
             autoplay
+            @dblclick="toggleFullscreen"
             @error="onMediaError"
           />
 
@@ -126,6 +128,7 @@ const loading = ref(false)
 const mediaError = ref(false)
 const currentUrl = ref<string | null>(null)
 const backdropEl = ref<HTMLElement | null>(null)
+const videoEl = ref<HTMLVideoElement | null>(null)
 
 const urlCache = new Map<string, string>()
 
@@ -207,6 +210,16 @@ function close() {
   emit('close')
 }
 
+function toggleFullscreen() {
+  const el = videoEl.value
+  if (!el) return
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    el.requestFullscreen().catch(() => {})
+  }
+}
+
 function onMediaError() {
   mediaError.value = true
   loading.value = false
@@ -326,7 +339,7 @@ onUnmounted(() => {
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 4rem 5rem;
+  padding: 3.5rem 1rem;
 }
 
 .lightbox-media-img {
@@ -338,11 +351,12 @@ onUnmounted(() => {
 }
 
 .lightbox-media-video {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 0.75rem;
-  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 0;
   background: black;
+  cursor: pointer;
 }
 
 .lightbox-audio-container {
@@ -386,10 +400,11 @@ onUnmounted(() => {
 
 /* Mobile */
 @media (max-width: 768px) {
-  .lightbox-content { padding: 3.5rem 1rem; }
+  .lightbox-content { padding: 3rem 0; }
   .lightbox-nav { width: 2.5rem; height: 2.5rem; }
   .lightbox-nav-prev { left: 0.5rem; }
   .lightbox-nav-next { right: 0.5rem; }
   .lightbox-audio-artwork { width: 8rem; height: 8rem; }
+  .lightbox-media-video { border-radius: 0; }
 }
 </style>