@fy-/fws-vue 2.2.55 → 2.2.57

package/components/ui/DefaultGallery.vue

@@ -108,8 +108,7 @@ function setModal(value: boolean) {
   }
   isGalleryOpen.value = value
   showControls.value = true
-  // Keep info panel open by default
-  infoPanel.value = true
+  // Don't reset info panel state when opening/closing
 }
 
 function openGalleryImage(index: number | undefined) {
@@ -325,13 +324,12 @@ function handleBackdropClick(event: MouseEvent) {
 }
 
 watch(currentImage, () => {
-  // Keep info panel open when image changes
-  infoPanel.value = true
-
-  // Update info height after image changes
-  nextTick(() => {
-    updateInfoHeight()
-  })
+  // Only update the info height, don't change user's preference
+  if (infoPanel.value) {
+    nextTick(() => {
+      updateInfoHeight()
+    })
+  }
 })
 
 // Update CSS variable with info panel height
@@ -351,12 +349,16 @@ onMounted(() => {
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
   eventBus.on(`${props.id}GalleryClose`, closeGallery)
 
-  // Initialize info height once mounted
-  updateInfoHeight()
+  // Initialize info height once mounted (only if info panel is shown)
+  if (infoPanel.value) {
+    updateInfoHeight()
+  }
 
   // Set up a resize observer to track info panel height changes
   const resizeObserver = new ResizeObserver(() => {
-    updateInfoHeight()
+    if (infoPanel.value) {
+      updateInfoHeight()
+    }
   })
 
   const infoElement = document.querySelector('.info-panel-slot')
@@ -460,7 +462,7 @@ onUnmounted(() => {
                               :src="isVideo(images[modelValue])"
                               class="shadow max-w-full h-auto object-contain"
                               :style="{
-                                maxHeight: infoPanel ? 'calc(85vh - var(--info-height, 0px))' : '85vh',
+                                maxHeight: infoPanel ? 'calc(80vh - var(--info-height, 0px) - 4rem)' : 'calc(80vh - 4rem)',
                               }"
                             />
                           </ClientOnly>
@@ -470,7 +472,7 @@ onUnmounted(() => {
                             v-if="modelValueSrc && imageComponent === 'img'"
                             class="shadow max-w-full h-auto object-contain"
                             :style="{
-                              maxHeight: infoPanel ? 'calc(85vh - var(--info-height, 0px))' : '85vh',
+                              maxHeight: infoPanel ? 'calc(80vh - var(--info-height, 0px) - 4rem)' : 'calc(80vh - 4rem)',
                             }"
                             :src="modelValueSrc"
                             :alt="`Gallery image ${modelValue + 1}`"
@@ -483,7 +485,7 @@ onUnmounted(() => {
                             :alt="modelValueSrc.alt"
                             class="shadow max-w-full h-auto object-contain"
                             :style="{
-                              maxHeight: infoPanel ? 'calc(85vh - var(--info-height, 0px))' : '85vh',
+                              maxHeight: infoPanel ? 'calc(80vh - var(--info-height, 0px) - 4rem)' : 'calc(80vh - 4rem)',
                             }"
                           />
                         </template>
@@ -537,7 +539,7 @@ onUnmounted(() => {
             >
               <div
                 v-if="sidePanel"
-                class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md h-full max-h-full overflow-y-auto"
+                class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md h-full max-h-full overflow-y-auto pt-16"
               >
                 <!-- Paging Controls -->
                 <div v-if="paging" class="flex items-center justify-center pt-2">
@@ -604,7 +606,7 @@ onUnmounted(() => {
           >
             <div
               v-if="showControls"
-              class="absolute top-0 left-0 right-0 px-4 py-3 flex justify-between items-center bg-gradient-to-b from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50] transition-opacity"
+              class="absolute top-0 left-0 right-0 px-4 py-3 flex justify-between items-center bg-gradient-to-b from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50] transition-opacity h-16"
             >
               <!-- Title and Counter -->
               <div class="flex items-center space-x-2">

package/package.json

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