@fy-/fws-vue 2.3.27 → 2.3.29

package/components/ui/DefaultGallery.vue

@@ -129,36 +129,29 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
-// Simple direct approach that correctly handles the info panel
+// Simple image sizing that relies on flexbox layout to handle the info panel
 const updateImageSizes = useDebounceFn(() => {
   // Get the main image
   const mainImage = document.querySelector('.image-display img') as HTMLImageElement
   if (!mainImage) return
 
-  // 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
-
   // Standard padding
   const padding = 24
 
-  // Calculate available height by subtracting ALL elements
-  const availableHeight = windowHeight.value - topHeight - infoHeight - padding
-
-  // 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
+
+  // Set width constraints
   mainImage.style.maxWidth = windowWidth.value <= 768
     ? '90vw'
     : `${availableWidth}px`
+
+  // Let height be auto to preserve aspect ratio and fit in flexbox container
+  mainImage.style.height = 'auto'
+
+  // Set a reasonable max-height if needed
+  mainImage.style.maxHeight = '75vh'
 }, 50)
 
 // Modal controls
@@ -261,9 +254,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)
   })
 }
 
@@ -556,9 +556,9 @@ onUnmounted(() => {
           ref="galleryContentRef"
           class="w-full h-full flex flex-col lg:flex-row"
         >
-          <!-- Main Image Area - Fills available space -->
+          <!-- Main Image Area with flex column layout -->
           <div
-            class="relative flex-1 h-full flex items-center justify-center"
+            class="relative flex-1 h-full flex flex-col"
             :style="{ paddingTop: `${topControlsHeight}px` }"
             :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
             style="max-width: 100%;"
@@ -586,10 +586,10 @@ onUnmounted(() => {
               </div>
             </transition>
 
-            <!-- Image Display Container -->
+            <!-- Image Container - flex-grow to fill available space -->
             <div
               ref="imageContainerRef"
-              class="image-container flex-grow flex items-center justify-center"
+              class="flex-grow flex items-center justify-center"
               @touchstart="touchStart"
               @touchend="touchEnd"
             >
@@ -659,7 +659,7 @@ onUnmounted(() => {
               </div>
             </transition>
 
-            <!-- Info Panel Below Image -->
+            <!-- Info Panel directly in flex column flow -->
             <transition
               enter-active-class="transition-all duration-300 ease-out"
               enter-from-class="opacity-0 transform translate-y-4"
@@ -671,9 +671,7 @@ onUnmounted(() => {
               <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"
-                @transitionend="updateImageSizes"
-                @resize="updateImageSizes"
+                class="w-full px-4 py-3 backdrop-blur-md bg-fv-neutral-900/80 border-t border-fv-neutral-800"
               >
                 <slot :value="images[modelValue]" />
               </div>

package/package.json

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