From fec8864e070d19b870eb3b39c4f6c26ff4d9659c Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Fri, 3 Apr 2026 14:04:54 +0400
Subject: [PATCH] fixed gallery silder sizes issue

---
 .../UiElements/GalleryCarouselOverlay.tsx     | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/UiElements/GalleryCarouselOverlay.tsx b/frontend/src/components/UiElements/GalleryCarouselOverlay.tsx
index c812bd6..85a9056 100644
--- a/frontend/src/components/UiElements/GalleryCarouselOverlay.tsx
+++ b/frontend/src/components/UiElements/GalleryCarouselOverlay.tsx
@@ -29,7 +29,7 @@ interface GalleryCarouselOverlayProps {
   nextY?: number;
   backX?: number;
   backY?: number;
-  // Button dimensions (CSS values like '48px', '3rem')
+  // Button dimensions (numeric values use vw for width, vh for height - same as regular elements)
   // When set with custom icon, button renders like NavigationElement (icon fills full button)
   prevWidth?: string;
   prevHeight?: string;
@@ -229,12 +229,19 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
     };
   }, [isEditMode, draggingButton, onButtonPositionChange]);
 
-  // Convert numeric value to rem CSS value
-  const toRem = (value?: string): string | undefined => {
+  // Convert numeric value to viewport units (vw for width, vh for height)
+  // Matches the unit system used by regular elements in elementStyles.ts
+  const toViewportUnit = (
+    value?: string,
+    unit: 'vw' | 'vh' = 'vw',
+  ): string | undefined => {
     if (!value || value.trim() === '') return undefined;
-    const num = parseFloat(value);
+    const trimmed = value.trim();
+    // If value already has a unit, preserve it
+    if (/[a-z%]+$/i.test(trimmed)) return trimmed;
+    const num = parseFloat(trimmed);
     if (!Number.isFinite(num) || num <= 0) return undefined;
-    return `${num}rem`;
+    return `${num}${unit}`;
   };
 
   // Render navigation button
@@ -253,8 +260,8 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
     const isDragging = draggingButton === type;
     const isNavButton = type === 'prev' || type === 'next';
     const hasCustomIcon = iconUrl && iconUrl.trim() !== '';
-    const widthRem = toRem(buttonWidth);
-    const heightRem = toRem(buttonHeight);
+    const widthValue = toViewportUnit(buttonWidth, 'vw');
+    const heightValue = toViewportUnit(buttonHeight, 'vh');
 
     // Navigation-style rendering: custom icon fills full button (like NavigationElement)
     // When custom icon is set, always use navigation style (icon only, no backdrop)
@@ -272,9 +279,9 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
           left: `${x}%`,
           top: `${y}%`,
           transform: 'translate(-50%, -50%)',
-          // Apply dimensions when set
-          ...(widthRem && { width: widthRem }),
-          ...(heightRem && { height: heightRem }),
+          // Apply dimensions when set (vw for width, vh for height - matches regular elements)
+          ...(widthValue && { width: widthValue }),
+          ...(heightValue && { height: heightValue }),
         }}
         onClick={(e) => {
           e.stopPropagation();