fixed gallery header issue

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 || '',

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>

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%',
+                maxWidth: '100%',
-                height: headerStyle.height || 'auto',
+                maxHeight: '100%',
+                width: 'auto',
+                height: 'auto',
               }}
               draggable={false}
             />