gallery text align setting added

frontend/src/components/Constructor/ElementEditorPanel.tsx

@@ -614,12 +614,15 @@ export function ElementEditorPanel({
                             selectedElement.galleryHeaderMinHeight || '',
                           galleryHeaderMaxHeight:
                             selectedElement.galleryHeaderMaxHeight || '',
+                          galleryHeaderTextAlign:
+                            selectedElement.galleryHeaderTextAlign || 'center',
                         }}
                         onChange={(prop, value) =>
                           onUpdateElement({ [prop]: value || undefined })
                         }
                         showFont
                         showDimensions
+                        showTextAlign
                       />
                       <GallerySectionStyleInputs
                         sectionLabel='Title'
@@ -641,11 +644,14 @@ export function ElementEditorPanel({
                             selectedElement.galleryTitleBorderRadius || '',
                           galleryTitleBorder:
                             selectedElement.galleryTitleBorder || '',
+                          galleryTitleTextAlign:
+                            selectedElement.galleryTitleTextAlign || 'center',
                         }}
                         onChange={(prop, value) =>
                           onUpdateElement({ [prop]: value || undefined })
                         }
                         showFont
+                        showTextAlign
                       />
                       <GallerySectionStyleInputs
                         sectionLabel='Info Spans'
@@ -672,6 +678,8 @@ export function ElementEditorPanel({
                             selectedElement.gallerySpanColumns ||
                             selectedElement.galleryColumns ||
                             3,
+                          gallerySpanTextAlign:
+                            selectedElement.gallerySpanTextAlign || 'center',
                         }}
                         onChange={(prop, value) =>
                           onUpdateElement({ [prop]: value || undefined })
@@ -679,6 +687,7 @@ export function ElementEditorPanel({
                         showFont
                         showGap
                         showColumns
+                        showTextAlign
                       />
                       <GallerySectionStyleInputs
                         sectionLabel='Image Cards'

frontend/src/components/ElementSettings/GallerySectionStyleInputs.tsx

@@ -20,6 +20,7 @@ interface GallerySectionStyleInputsProps {
   showTitleStyles?: boolean;
   showDimensions?: boolean;
   showAspectRatio?: boolean;
+  showTextAlign?: boolean;
 }
 
 /**
@@ -37,6 +38,7 @@ const GallerySectionStyleInputs: React.FC<GallerySectionStyleInputsProps> = ({
   showTitleStyles = false,
   showDimensions = false,
   showAspectRatio = false,
+  showTextAlign = false,
 }) => {
   return (
     <div className='rounded border border-gray-200 p-2 space-y-2'>
@@ -108,6 +110,24 @@ const GallerySectionStyleInputs: React.FC<GallerySectionStyleInputsProps> = ({
           />
         </div>
 
+        {/* Text Alignment (optional) */}
+        {showTextAlign && (
+          <div>
+            <label className='mb-1 block text-[10px] text-gray-600'>
+              Align
+            </label>
+            <select
+              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+              value={values[`${prefix}TextAlign`] || 'center'}
+              onChange={(e) => onChange(`${prefix}TextAlign`, e.target.value)}
+            >
+              <option value='left'>Left</option>
+              <option value='center'>Center</option>
+              <option value='right'>Right</option>
+            </select>
+          </div>
+        )}
+
         {/* Gap (optional) */}
         {showGap && (
           <div>

frontend/src/components/UiElements/elements/GalleryElement.tsx

@@ -25,6 +25,18 @@ import {
 } from '../../../lib/gallerySectionStyles';
 import { useBackdropEffect } from '../../../hooks/useBackdropEffect';
 
+/** Convert CSS textAlign to flexbox justifyContent */
+const textAlignToJustify = (textAlign?: string): string => {
+  switch (textAlign) {
+    case 'left':
+      return 'flex-start';
+    case 'right':
+      return 'flex-end';
+    default:
+      return 'center';
+  }
+};
+
 interface GalleryElementProps {
   element: CanvasElement;
   resolveUrl?: (url: string | undefined) => string;
@@ -173,11 +185,7 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
         ) : null}
 
         {/* Title */}
-        {title && (
+        {title && <div style={titleStyle}>{title}</div>}
-          <div className='text-center' style={titleStyle}>
-            {title}
-          </div>
-        )}
 
         {/* Info spans */}
         {infoSpans.length > 0 && (
@@ -191,8 +199,13 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
               return (
                 <div
                   key={span.id}
-                  className='text-center flex items-center justify-center'
+                  className='flex items-center'
-                  style={spanItemStyle}
+                  style={{
+                    ...spanItemStyle,
+                    justifyContent: textAlignToJustify(
+                      spanStyle.textAlign as string,
+                    ),
+                  }}
                 >
                   {span.iconUrl ? (
                     // eslint-disable-next-line @next/next/no-img-element

frontend/src/lib/gallerySectionStyles.ts

@@ -30,6 +30,7 @@ export const GALLERY_SECTION_DEFAULTS: Record<
     fontSize: '1.5rem', // text-2xl
     fontWeight: '700', // font-bold
     padding: '0.25rem 0.5rem', // px-1 py-2
+    textAlign: 'center',
   },
   title: {
     backgroundColor: '#fefce8', // bg-amber-50
@@ -38,6 +39,7 @@ export const GALLERY_SECTION_DEFAULTS: Record<
     fontWeight: '600', // font-semibold
     padding: '0.5rem 0.75rem', // py-2 px-3
     borderRadius: '0.5rem', // rounded-lg
+    textAlign: 'center',
   },
   span: {
     backgroundColor: '#334155', // bg-slate-700
@@ -46,6 +48,7 @@ export const GALLERY_SECTION_DEFAULTS: Record<
     fontWeight: '500', // font-medium
     padding: '0.5rem', // py-2 px-2
     borderRadius: '0.5rem', // rounded-lg
+    textAlign: 'center',
   },
   card: {
     borderRadius: '0.5rem', // rounded-lg
@@ -215,6 +218,14 @@ export function buildGalleryHeaderStyle(
     normalizePxValue,
   );
 
+  // Text alignment with center default
+  applyWithDefault(
+    style,
+    'textAlign',
+    element.galleryHeaderTextAlign,
+    defaults.textAlign,
+  );
+
   return style;
 }
 
@@ -270,6 +281,14 @@ export function buildGalleryTitleStyle(
     }
   }
 
+  // Text alignment with center default
+  applyWithDefault(
+    style,
+    'textAlign',
+    element.galleryTitleTextAlign,
+    defaults.textAlign,
+  );
+
   return style;
 }
 
@@ -321,6 +340,14 @@ export function buildGallerySpanStyle(
     }
   }
 
+  // Text alignment with center default
+  applyWithDefault(
+    style,
+    'textAlign',
+    element.gallerySpanTextAlign,
+    defaults.textAlign,
+  );
+
   return style;
 }
 
@@ -473,6 +500,7 @@ export const GALLERY_SECTION_STYLE_PROPS = [
   'galleryHeaderHeight',
   'galleryHeaderMinHeight',
   'galleryHeaderMaxHeight',
+  'galleryHeaderTextAlign',
   // Title
   'galleryTitleBackgroundColor',
   'galleryTitleColor',
@@ -482,6 +510,7 @@ export const GALLERY_SECTION_STYLE_PROPS = [
   'galleryTitlePadding',
   'galleryTitleBorderRadius',
   'galleryTitleBorder',
+  'galleryTitleTextAlign',
   // Spans
   'gallerySpanBackgroundColor',
   'gallerySpanColor',
@@ -493,6 +522,7 @@ export const GALLERY_SECTION_STYLE_PROPS = [
   'gallerySpanBorder',
   'gallerySpanGap',
   'gallerySpanColumns',
+  'gallerySpanTextAlign',
   // Cards
   'galleryCardBackgroundColor',
   'galleryCardBorderRadius',

frontend/src/pages/constructor.tsx

@@ -1321,7 +1321,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
             <div className='absolute inset-0 z-10'>
               {isLoading ? (
                 <div className='absolute inset-0 flex items-center justify-center'>
-                  <p className='text-sm text-gray-500'>Loading constructor...</p>
+                  <p className='text-sm text-gray-500'>
+                    Loading constructor...
+                  </p>
                 </div>
               ) : pages.length === 0 ? (
                 <div className='absolute inset-0 flex items-center justify-center'>

frontend/src/types/constructor.ts

@@ -115,6 +115,7 @@ export interface CanvasElement extends BaseCanvasElement {
   galleryHeaderHeight?: string;
   galleryHeaderMinHeight?: string;
   galleryHeaderMaxHeight?: string;
+  galleryHeaderTextAlign?: 'left' | 'center' | 'right';
   // Gallery Section Styles - Title
   galleryTitleBackgroundColor?: string;
   galleryTitleColor?: string;
@@ -123,6 +124,7 @@ export interface CanvasElement extends BaseCanvasElement {
   galleryTitlePadding?: string;
   galleryTitleBorderRadius?: string;
   galleryTitleBorder?: string;
+  galleryTitleTextAlign?: 'left' | 'center' | 'right';
   // Gallery Section Styles - Spans
   gallerySpanBackgroundColor?: string;
   gallerySpanColor?: string;
@@ -134,6 +136,7 @@ export interface CanvasElement extends BaseCanvasElement {
   gallerySpanBorder?: string;
   gallerySpanGap?: string;
   gallerySpanColumns?: number;
+  gallerySpanTextAlign?: 'left' | 'center' | 'right';
   // Gallery Section Styles - Cards
   galleryCardBackgroundColor?: string;
   galleryCardBorderRadius?: string;