@fy-/fws-vue 2.3.27 → 2.3.28

package/components/ui/DefaultGallery.vue

@@ -131,6 +131,17 @@ const currentIndex = computed(() => modelValue.value + 1)
 
 // Simple direct approach that correctly handles the info panel
 const updateImageSizes = useDebounceFn(() => {
+  // 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
@@ -138,13 +149,18 @@ const updateImageSizes = useDebounceFn(() => {
   // Get exact measurements of all UI elements
   const topHeight = topControlsRef.value?.offsetHeight || 0
 
-  // CRITICAL: Always include the info panel height when 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
+    }
+  }
 
-  // Standard padding
-  const padding = 24
+  // Standard padding with extra safety margin
+  const padding = 40
 
   // Calculate available height by subtracting ALL elements
   const availableHeight = windowHeight.value - topHeight - infoHeight - padding
@@ -159,7 +175,7 @@ const updateImageSizes = useDebounceFn(() => {
   mainImage.style.maxWidth = windowWidth.value <= 768
     ? '90vw'
     : `${availableWidth}px`
-}, 50)
+}
 
 // Modal controls
 function setModal(value: boolean) {
@@ -261,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)
   })
 }
 
@@ -659,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"
@@ -667,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]" />
@@ -923,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.27",
+  "version": "2.3.28",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",