Fix: Exclude SPA pages from Appearance Entry Page dropdown, remove hardcoded Hero paddings, fix Accordion dropdown clipping

customer-spa/src/lib/sectionStyles.ts

@@ -1,15 +1,18 @@
+export interface SectionStyleResult {
+    classNames?: string;
+    style?: React.CSSProperties;
+    hasOverlay?: boolean;
+    overlayOpacity?: number;
+    backgroundImage?: string;
+}
+
 /**
  * Shared utility to compute background styles from section styles.
  * Used by all customer SPA section components.
  */
-export function getSectionBackground(styles?: Record<string, any>): {
-    style: React.CSSProperties;
-    hasOverlay: boolean;
-    overlayOpacity: number;
-    backgroundImage?: string;
-} {
+export function getSectionBackground(styles?: Record<string, any>): SectionStyleResult {
     if (!styles) {
-        return { style: {}, hasOverlay: false, overlayOpacity: 0 };
+        return { style: {}, hasOverlay: false, overlayStyle: undefined };
     }
 
     const bgType = styles.backgroundType || 'solid';
@@ -18,6 +21,14 @@ export function getSectionBackground(styles?: Record<string, any>): {
     let overlayOpacity = 0;
     let backgroundImage: string | undefined;
 
+    if (styles.paddingTop) {
+        style.paddingTop = styles.paddingTop;
+    }
+
+    if (styles.paddingBottom) {
+        style.paddingBottom = styles.paddingBottom;
+    }
+
     switch (bgType) {
         case 'gradient':
             style.background = `linear-gradient(${styles.gradientAngle ?? 135}deg, ${styles.gradientFrom || '#9333ea'}, ${styles.gradientTo || '#3b82f6'})`;

customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx

@@ -168,7 +168,7 @@ export function ContentSection({ section }: ContentSectionProps) {
     const scheme = COLOR_SCHEMES[section.colorScheme || 'default'];
     // Default to 'default' width if not specified
     const layout = section.layoutVariant || 'default';
-    const widthClass = WIDTH_CLASSES[layout] || WIDTH_CLASSES.default;
+    const widthClass = section.styles?.contentWidth === 'full' ? WIDTH_CLASSES.full : (WIDTH_CLASSES[layout] || WIDTH_CLASSES.default);
 
     const heightPreset = section.styles?.heightPreset || 'default';
 

customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx

@@ -61,16 +61,7 @@ export function HeroSection({
 
     const imageStyle = elementStyles?.['image'] || {};
 
-    // Determine height classes
-    const heightPreset = styles?.heightPreset || 'default';
-    const heightMap: Record<string, string> = {
-        'default': 'py-12 md:py-24', // Original Default
-        'small': 'py-8 md:py-16',
-        'medium': 'py-16 md:py-32',
-        'large': 'py-24 md:py-48',
-        'screen': 'min-h-screen py-20 flex items-center',
-    };
-    const heightClasses = heightMap[heightPreset] || 'py-12 md:py-24';
+
 
     // Helper to get background style for dynamic schemes
     const getBackgroundStyle = (): React.CSSProperties | undefined => {
@@ -96,17 +87,13 @@ export function HeroSection({
             className={cn(
                 'wn-section wn-hero',
                 `wn-hero--${layout}`,
-                `wn-scheme--${colorScheme}`,
                 'relative overflow-hidden',
-                isDynamicScheme && 'text-white',
-                colorScheme === 'muted' && !hasCustomBackground && 'bg-muted',
             )}
-            style={getBackgroundStyle()}
+            style={sectionBg.style}
         >
             <div className={cn(
-                'mx-auto px-4',
-                heightClasses,
-                styles?.contentWidth === 'full' ? 'w-full' : 'container',
+                'mx-auto px-4 z-10 relative flex w-full',
+                styles?.contentWidth === 'full' ? 'w-full' : 'container max-w-7xl',
                 {
                     'flex flex-col md:flex-row items-center gap-8': isImageLeft || isImageRight,
                     'text-center': isCentered,