@fy-/fws-vue 2.3.24 → 2.3.27

package/components/ui/DefaultGallery.vue

@@ -129,36 +129,36 @@ 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
+  // 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
 
-  // For desktop, reserve more space at the bottom for the info panel
-  // This prevents overlap with the bottom panel
-  const bottomPadding = windowWidth.value > 768 ? 100 : 32
-
-  // Account for info panel only on mobile (where it overlays in the middle)
-  // On desktop, we use the bottomPadding to prevent overlap
-  const infoHeight = (windowWidth.value <= 768 && infoPanel.value && infoPanelRef.value)
+  // CRITICAL: Always include the info panel height when visible
+  const infoHeight = infoPanel.value && infoPanelRef.value
     ? infoPanelRef.value.offsetHeight
     : 0
 
-  const availableHeight = windowHeight.value - topHeight - infoHeight - bottomPadding
+  // Standard padding
+  const padding = 24
+
+  // 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`
+    ? '90vw'
+    : `${availableWidth}px`
 }, 50)
 
 // Modal controls
@@ -672,6 +672,8 @@ onUnmounted(() => {
                 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"
+                @transitionend="updateImageSizes"
+                @resize="updateImageSizes"
               >
                 <slot :value="images[modelValue]" />
               </div>

package/package.json

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