@fy-/fws-vue 2.3.14 → 2.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -161,9 +161,17 @@ const calculateImageSize = useDebounceFn(() => {
161
161
  // Force browser to recalculate styles
162
162
  void img.offsetHeight
163
163
 
164
- // Set proper height
164
+ // Set proper height and width
165
165
  img.style.maxHeight = availableHeight.value
166
- img.style.maxWidth = sidePanel.value ? 'calc(100vw - 16rem)' : '100vw'
166
+
167
+ // Adjust image size based on screen size
168
+ if (windowWidth.value <= 768) {
169
+ img.style.maxWidth = '95vw'
170
+ img.style.maxHeight = `calc(${windowHeight.value * 0.7 / 16}rem)`
171
+ }
172
+ else {
173
+ img.style.maxWidth = sidePanel.value ? 'calc(100vw - 17rem)' : '94vw'
174
+ }
167
175
  })
168
176
  })
169
177
  }, 50)
@@ -582,7 +590,8 @@ onUnmounted(() => {
582
590
  <!-- Main Image Area - Fills available space -->
583
591
  <div
584
592
  class="relative flex-1 h-full flex items-center justify-center"
585
- :class="{ 'lg:pr-64': sidePanel }"
593
+ :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
594
+ style="max-width: 100%;"
586
595
  >
587
596
  <!-- Image Navigation Controls - Left -->
588
597
  <transition
@@ -672,6 +681,7 @@ onUnmounted(() => {
672
681
  <div
673
682
  v-if="showControls && images.length > 1"
674
683
  class="absolute right-0 z-40 h-full flex items-center px-2 md:px-4"
684
+ :class="{ 'lg:mr-64': sidePanel }"
675
685
  >
676
686
  <button
677
687
  class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
@@ -714,7 +724,7 @@ onUnmounted(() => {
714
724
  <div
715
725
  v-if="sidePanel"
716
726
  ref="sidePanelRef"
717
- class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md overflow-y-auto z-40"
727
+ class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md overflow-y-auto z-40 cool-scroll"
718
728
  :style="{ 'padding-top': `${topControlsHeight}px` }"
719
729
  >
720
730
  <!-- Paging Controls if needed -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fy-/fws-vue",
3
- "version": "2.3.14",
3
+ "version": "2.3.15",
4
4
  "author": "Florian 'Fy' Gasquez <m@fy.to>",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/fy-to/FWJS#readme",