@fy-/fws-vue 2.3.12 → 2.3.13

package/components/ui/DefaultGallery.vue

@@ -97,13 +97,17 @@ function updateImageSizes() {
     if (imageContainers && imageContainers.length > 0) {
       imageContainers.forEach((img) => {
         // Force a reflow to ensure correct sizing
-        if (img.style.maxHeight) {
-          const currentMaxHeight = img.style.maxHeight
-          img.style.maxHeight = ''
-          // Force browser to recalculate styles
-          void img.offsetHeight
-          img.style.maxHeight = currentMaxHeight
-        }
+        img.style.maxHeight = ''
+        // Force browser to recalculate styles
+        void img.offsetHeight
+
+        // Calculate the correct height based on fullscreen and info panel state
+        const topHeight = 4 // rem
+        const infoHeight = infoPanel.value ? Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--info-height') || '0px') / 16 : 0
+        const viewHeight = isFullscreen.value ? 90 : 80
+
+        // Set explicit height with important to override any other styles
+        img.style.maxHeight = `calc(${viewHeight}vh - ${infoHeight}rem - ${topHeight}rem) !important`
       })
     }
   })
@@ -388,6 +392,14 @@ function updateInfoHeight() {
   })
 }
 
+// Debounced window resize handler to avoid performance issues
+const handleWindowResize = useDebounceFn(() => {
+  if (isGalleryOpen.value) {
+    updateImageSizes()
+    updateInfoHeight()
+  }
+}, 100)
+
 onMounted(() => {
   eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
@@ -411,6 +423,9 @@ onMounted(() => {
     })
   }
 
+  // Listen for window resize events
+  useEventListener(window, 'resize', handleWindowResize)
+
   // Listen for fullscreen changes to update image sizes
   useEventListener(document, 'fullscreenchange', () => {
     if (document.fullscreenElement) {
@@ -507,6 +522,7 @@ onUnmounted(() => {
                 <!-- Main Image Container -->
                 <div
                   class="flex-1 flex flex-col z-[2] items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] relative"
+                  style="padding-top: 1rem;"
                 >
                   <transition
                     :name="direction === 'next' ? 'slide-next' : 'slide-prev'"
@@ -623,7 +639,8 @@ 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 pt-16"
+                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"
+                style="padding-top: 4rem;"
               >
                 <!-- Paging Controls -->
                 <div v-if="paging" class="flex items-center justify-center pt-2">
@@ -690,7 +707,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 h-16"
+              class="fixed 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">
@@ -881,6 +898,15 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+/* Fix for top controls to ensure they're always visible */
+.fixed.top-0 {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 51 !important;
+}
+
 /* Transition styles for next (right) navigation */
 .slide-next-enter-active,
 .slide-next-leave-active {

package/package.json

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