From 917223ad43baecb2d4c9b0b24da3159ab7a585dd Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Thu, 30 Apr 2026 09:01:33 +0200
Subject: [PATCH] fixed gallery header issue

---
 .../Constructor/ElementEditorPanel.tsx        |  4 +++-
 .../StyleSettingsSectionCompact.tsx           |  6 +++++-
 .../UiElements/elements/GalleryElement.tsx    | 19 +++++++++++++++----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Constructor/ElementEditorPanel.tsx b/frontend/src/components/Constructor/ElementEditorPanel.tsx
index 5a5b601..187f955 100644
--- a/frontend/src/components/Constructor/ElementEditorPanel.tsx
+++ b/frontend/src/components/Constructor/ElementEditorPanel.tsx
@@ -93,12 +93,14 @@ const handleCssPropertyChange = (
     'maxHeight',
     'border',
     'borderRadius',
+    'gap',
   ];
 
   const getUnit = (p: string) => {
     if (['width', 'minWidth', 'maxWidth'].includes(p)) return 'vw';
     if (['height', 'minHeight', 'maxHeight'].includes(p)) return 'vh';
     if (['border', 'borderRadius'].includes(p)) return 'px';
+    if (p === 'gap') return 'rem';
     return '';
   };
 
@@ -698,7 +700,7 @@ export function ElementEditorPanel({
                       maxHeight: extractNumericValue(selectedElement.maxHeight),
                       margin: selectedElement.margin || '',
                       padding: selectedElement.padding || '',
-                      gap: selectedElement.gap || '',
+                      gap: extractNumericValue(selectedElement.gap),
                       fontSize: selectedElement.fontSize || '',
                       lineHeight: selectedElement.lineHeight || '',
                       fontWeight: selectedElement.fontWeight || '',
diff --git a/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
index 66a1065..377c47c 100644
--- a/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
@@ -122,12 +122,16 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
         </div>
         <div>
           <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-            Gap
+            Gap (rem)
           </label>
           <input
+            type='number'
+            step='0.25'
+            min='0'
             className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
             value={values.gap || ''}
             onChange={(e) => onChange('gap', e.target.value)}
+            placeholder='e.g. 1'
           />
         </div>
         <div>
diff --git a/frontend/src/components/UiElements/elements/GalleryElement.tsx b/frontend/src/components/UiElements/elements/GalleryElement.tsx
index 0d04580..c0d93ce 100644
--- a/frontend/src/components/UiElements/elements/GalleryElement.tsx
+++ b/frontend/src/components/UiElements/elements/GalleryElement.tsx
@@ -167,15 +167,26 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
         {/* Header: image takes priority, otherwise render text */}
         {/* Header styles (border, borderRadius, dimensions) apply to both image and text modes */}
         {headerImageUrl ? (
-          <div style={{ ...headerStyle, padding: 0, overflow: 'hidden' }}>
+          <div
+            style={{
+              ...headerStyle,
+              padding: 0,
+              overflow: 'hidden',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={resolve(headerImageUrl)}
               alt=''
-              className='object-cover'
+              className='object-contain'
               style={{
-                width: '100%',
-                height: headerStyle.height || 'auto',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                width: 'auto',
+                height: 'auto',
               }}
               draggable={false}
             />