@fy-/fws-vue 2.3.25 → 2.3.28

package/components/ui/DefaultGallery.vue

@@ -129,36 +129,53 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
-// Simple but effective image sizing function
+// Simple direct approach that correctly handles the info panel
 const updateImageSizes = useDebounceFn(() => {
-  // Only target main image for sizing
+  // First immediately run to prevent lag in calculations
+  forceUpdateImageSizes()
+
+  // Then run again after a short delay to ensure all DOM updates are applied
+  setTimeout(() => {
+    forceUpdateImageSizes()
+  }, 10)
+}, 50)
+
+// Directly update image sizes without debounce to ensure immediate layout updates
+function forceUpdateImageSizes() {
+  // Get the main image
   const mainImage = document.querySelector('.image-display img') as HTMLImageElement
   if (!mainImage) return
 
-  // Simple, direct calculation of available space
+  // Get exact measurements of all UI elements
   const topHeight = topControlsRef.value?.offsetHeight || 0
 
-  // Always account for info panel height if it's visible
-  const infoHeight = infoPanel.value && infoPanelRef.value
-    ? infoPanelRef.value.offsetHeight
-    : 0
+  // CRITICAL: Get actual DOM measurement for info panel, not just reactive ref value
+  let infoHeight = 0
+  if (infoPanel.value && infoPanelRef.value) {
+    infoHeight = infoPanelRef.value.offsetHeight
+    // Ensure we have a real measurement
+    if (infoHeight < 5 && infoPanelRef.value.firstElementChild) {
+      infoHeight = (infoPanelRef.value.firstElementChild as HTMLElement).offsetHeight + 24 // Add padding
+    }
+  }
 
-  // Add a small additional padding
-  const bottomPadding = 16
+  // Standard padding with extra safety margin
+  const padding = 40
 
-  // Calculate total available height by subtracting all elements
-  const availableHeight = windowHeight.value - topHeight - infoHeight - bottomPadding
+  // Calculate available height by subtracting ALL elements
+  const availableHeight = windowHeight.value - topHeight - infoHeight - padding
 
-  // Apply size directly to fill available space
+  // Apply the exact height constraint to the image
   mainImage.style.maxHeight = `${availableHeight}px`
   mainImage.style.width = 'auto'
 
   // Handle width constraints
   const sidebarWidth = sidePanel.value ? 256 : 0
+  const availableWidth = windowWidth.value - sidebarWidth - padding * 2
   mainImage.style.maxWidth = windowWidth.value <= 768
-    ? '85vw'
-    : `${windowWidth.value - sidebarWidth - 48}px`
-}, 50)
+    ? '90vw'
+    : `${availableWidth}px`
+}
 
 // Modal controls
 function setModal(value: boolean) {
@@ -260,9 +277,16 @@ function toggleInfoPanel() {
   infoPanel.value = !infoPanel.value
   resetControlsTimer()
 
-  // Update layout after panel toggle
+  // Update layout immediately AND after nextTick to ensure DOM updates
+  updateImageSizes()
+
+  // Schedule multiple updates to handle any transition effects
   nextTick(() => {
     updateImageSizes()
+
+    // Additional delayed updates to catch transitions
+    setTimeout(() => updateImageSizes(), 50)
+    setTimeout(() => updateImageSizes(), 300)
   })
 }
 
@@ -658,7 +682,7 @@ onUnmounted(() => {
               </div>
             </transition>
 
-            <!-- Info Panel Below Image -->
+            <!-- Info Panel Below Image positioned to not overlap with image -->
             <transition
               enter-active-class="transition-all duration-300 ease-out"
               enter-from-class="opacity-0 transform translate-y-4"
@@ -666,12 +690,20 @@ onUnmounted(() => {
               leave-active-class="transition-all duration-300 ease-in"
               leave-from-class="opacity-100 transform translate-y-0"
               leave-to-class="opacity-0 transform translate-y-4"
+              @before-enter="updateImageSizes"
+              @enter="updateImageSizes"
+              @after-enter="updateImageSizes"
+              @before-leave="updateImageSizes"
+              @leave="updateImageSizes"
+              @after-leave="updateImageSizes"
             >
               <div
                 v-if="infoPanel && images[modelValue]"
                 ref="infoPanelRef"
-                class="info-panel absolute bottom-0 left-0 right-0 px-4 py-3 backdrop-blur-md bg-fv-neutral-900/70 z-45"
+                class="info-panel px-4 py-3 backdrop-blur-md bg-fv-neutral-900/80"
+                @transitionstart="updateImageSizes"
                 @transitionend="updateImageSizes"
+                @transitionrun="updateImageSizes"
                 @resize="updateImageSizes"
               >
                 <slot :value="images[modelValue]" />
@@ -922,6 +954,11 @@ onUnmounted(() => {
   width: 100%;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
 }
 
 /* Transition styles for next (right) navigation */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.25",
+  "version": "2.3.28",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",