From 6f23ccdda4bc14056a2b62cad61843d97a59b5e7 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Sat, 28 Feb 2026 01:10:49 +0700
Subject: [PATCH] Fix: Exclude SPA pages from Appearance Entry Page dropdown,
 remove hardcoded Hero paddings, fix Accordion dropdown clipping

---
 admin-spa/src/components/ui/accordion.tsx     |  2 +-
 admin-spa/src/routes/Appearance/General.tsx   |  3 +-
 .../Pages/components/InspectorPanel.tsx       | 47 +++++++++++-
 .../section-renderers/HeroRenderer.tsx        | 19 +----
 customer-spa/src/lib/sectionStyles.ts         | 25 +++++--
 .../DynamicPage/sections/ContentSection.tsx   |  2 +-
 .../DynamicPage/sections/HeroSection.tsx      | 21 ++----
 includes/Frontend/PageSSR.php                 | 71 ++++++++++++++-----
 8 files changed, 126 insertions(+), 64 deletions(-)

diff --git a/admin-spa/src/components/ui/accordion.tsx b/admin-spa/src/components/ui/accordion.tsx
index e6a723d..dc69ba5 100644
--- a/admin-spa/src/components/ui/accordion.tsx
+++ b/admin-spa/src/components/ui/accordion.tsx
@@ -44,7 +44,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
diff --git a/admin-spa/src/routes/Appearance/General.tsx b/admin-spa/src/routes/Appearance/General.tsx
index ac03e76..d3666cf 100644
--- a/admin-spa/src/routes/Appearance/General.tsx
+++ b/admin-spa/src/routes/Appearance/General.tsx
@@ -16,6 +16,7 @@ interface WordPressPage {
   id: number;
   title: string;
   slug: string;
+  is_woonoow_page?: boolean;
 }
 
 export default function AppearanceGeneral() {
@@ -199,7 +200,7 @@ export default function AppearanceGeneral() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="0">— None —</SelectItem>
-                {availablePages.map((page) => (
+                {availablePages.filter(page => !page.is_woonoow_page).map((page) => (
                   <SelectItem key={page.id} value={page.id.toString()}>
                     {page.title}
                   </SelectItem>
diff --git a/admin-spa/src/routes/Appearance/Pages/components/InspectorPanel.tsx b/admin-spa/src/routes/Appearance/Pages/components/InspectorPanel.tsx
index 89e08b2..9f8f375 100644
--- a/admin-spa/src/routes/Appearance/Pages/components/InspectorPanel.tsx
+++ b/admin-spa/src/routes/Appearance/Pages/components/InspectorPanel.tsx
@@ -598,13 +598,14 @@ export function InspectorPanel({
                                         </MediaUploader>
                                     </div>
 
-                                    <div className="space-y-3 pt-2">
+                                    <div className="space-y-1 pt-2">
                                         <div className="flex items-center justify-between">
                                             <Label className="text-xs">{__('Overlay Opacity')}</Label>
                                             <span className="text-xs text-gray-500">{selectedSection.styles?.backgroundOverlay ?? 0}%</span>
                                         </div>
                                         <Slider
                                             value={[selectedSection.styles?.backgroundOverlay ?? 0]}
+                                            min={0}
                                             max={100}
                                             step={5}
                                             onValueChange={(vals) => onSectionStylesChange({ backgroundOverlay: vals[0] })}
@@ -613,7 +614,49 @@ export function InspectorPanel({
                                 </>
                             )}
 
-                            <div className="space-y-2 pt-2">
+                            {/* Spacing Controls */}
+                            <div className="grid grid-cols-2 gap-2 pt-2 border-t mt-4">
+                                <div className="space-y-1">
+                                    <Label className="text-xs text-gray-500">{__('Padding Top')}</Label>
+                                    <input
+                                        type="text"
+                                        placeholder="e.g. 40px, 4rem"
+                                        className="w-full h-8 text-xs rounded border px-2"
+                                        value={selectedSection.styles?.paddingTop || ''}
+                                        onChange={(e) => onSectionStylesChange({ paddingTop: e.target.value })}
+                                    />
+                                </div>
+                                <div className="space-y-1">
+                                    <Label className="text-xs text-gray-500">{__('Padding Bottom')}</Label>
+                                    <input
+                                        type="text"
+                                        placeholder="e.g. 40px, 4rem"
+                                        className="w-full h-8 text-xs rounded border px-2"
+                                        value={selectedSection.styles?.paddingBottom || ''}
+                                        onChange={(e) => onSectionStylesChange({ paddingBottom: e.target.value })}
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="space-y-2 pt-2 border-t mt-4">
+                                <Label className="text-xs">{__('Content Width')}</Label>
+                                <RadioGroup
+                                    value={selectedSection.styles?.contentWidth || 'full'}
+                                    onValueChange={(val: any) => onSectionStylesChange({ contentWidth: val })}
+                                    className="flex gap-4"
+                                >
+                                    <div className="flex items-center space-x-2">
+                                        <RadioGroupItem value="full" id="width-full" />
+                                        <Label htmlFor="width-full" className="text-sm font-normal cursor-pointer">{__('Full Width')}</Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <RadioGroupItem value="contained" id="width-contained" />
+                                        <Label htmlFor="width-contained" className="text-sm font-normal cursor-pointer">{__('Contained')}</Label>
+                                    </div>
+                                </RadioGroup>
+                            </div>
+
+                            <div className="space-y-2 pt-2 border-t mt-4">
                                 <Label className="text-xs">{__('Section Height')}</Label>
                                 <Select
                                     value={selectedSection.styles?.heightPreset || 'default'}
diff --git a/admin-spa/src/routes/Appearance/Pages/components/section-renderers/HeroRenderer.tsx b/admin-spa/src/routes/Appearance/Pages/components/section-renderers/HeroRenderer.tsx
index 91641b9..b24ab5b 100644
--- a/admin-spa/src/routes/Appearance/Pages/components/section-renderers/HeroRenderer.tsx
+++ b/admin-spa/src/routes/Appearance/Pages/components/section-renderers/HeroRenderer.tsx
@@ -66,24 +66,12 @@ export function HeroRenderer({ section, className }: HeroRendererProps) {
     // Helper for image styles
     const imageStyle = section.elementStyles?.['image'] || {};
 
-    const getBackgroundStyle = () => {
-        if (scheme.bg === 'wn-gradient-bg') {
-            return { backgroundImage: 'linear-gradient(135deg, var(--wn-gradient-start, #9333ea), var(--wn-gradient-end, #3b82f6))' };
-        }
-        if (scheme.bg === 'wn-primary-bg') {
-            return { backgroundColor: 'var(--wn-primary, #1a1a1a)' };
-        }
-        if (scheme.bg === 'wn-secondary-bg') {
-            return { backgroundColor: 'var(--wn-secondary, #6b7280)' };
-        }
-        return undefined;
-    };
+
 
     if (layout === 'hero-left-image' || layout === 'hero-right-image') {
         return (
             <div
-                className={cn('py-12 px-4 md:py-20 md:px-8', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
-                style={getBackgroundStyle()}
+                className={cn('w-full', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
             >
                 <div className={cn(
                     'max-w-6xl mx-auto flex items-center gap-12',
@@ -158,8 +146,7 @@ export function HeroRenderer({ section, className }: HeroRendererProps) {
     // Default centered layout
     return (
         <div
-            className={cn('py-12 px-4 md:py-20 md:px-8 text-center', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
-            style={getBackgroundStyle()}
+            className={cn('w-full text-center', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
         >
             <div className="max-w-4xl mx-auto space-y-6">
                 <h1
diff --git a/customer-spa/src/lib/sectionStyles.ts b/customer-spa/src/lib/sectionStyles.ts
index 8f3b725..6369d43 100644
--- a/customer-spa/src/lib/sectionStyles.ts
+++ b/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'})`;
diff --git a/customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx b/customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx
index 88eed69..32621a2 100644
--- a/customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx
+++ b/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';
 
diff --git a/customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx b/customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx
index 4eab22d..5d6c1dc 100644
--- a/customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx
+++ b/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,
diff --git a/includes/Frontend/PageSSR.php b/includes/Frontend/PageSSR.php
index 821f49e..941fdba 100644
--- a/includes/Frontend/PageSSR.php
+++ b/includes/Frontend/PageSSR.php
@@ -167,12 +167,18 @@ class PageSSR
         $subtitle_style = self::generate_style_attr($element_styles['subtitle'] ?? []);
         $cta_style = self::generate_style_attr($element_styles['cta_text'] ?? []); // Button
 
-        // Image (if not background)
+        // Content Wrapper
+        $content_width = $section_styles['contentWidth'] ?? 'contained';
+        $wrapper_class = $content_width === 'full' ? 'w-full' : 'container max-w-7xl mx-auto px-4';
+
+        $html .= "<div class=\"wn-hero__content-wrapper {$wrapper_class}\" style=\"position: relative; z-index: 10;\">";
+
+        // Image (if not background) - Inside Content Wrapper for Proper Alignment
         if ($image && !$bg_image && $layout !== 'default') {
             $html .= "<img src=\"{$image}\" alt=\"{$title}\" class=\"wn-hero__image\" />";
         }
 
-        $html .= '<div class="wn-hero__content" style="position: relative; z-index: 10;">';
+        $html .= '<div class="wn-hero__content">';
         if ($title) {
             $html .= "<h1 class=\"wn-hero__title\" {$title_style}>{$title}</h1>";
         }
@@ -183,6 +189,7 @@ class PageSSR
             $html .= "<a href=\"{$cta_url}\" class=\"wn-hero__cta\" {$cta_style}>{$cta_text}</a>";
         }
         $html .= '</div>';
+        $html .= '</div>';
         $html .= '</section>';
 
         return $html;
@@ -206,8 +213,10 @@ class PageSSR
         $title_style = self::generate_style_attr($element_styles['title'] ?? []);
         $text_style = self::generate_style_attr($element_styles['text'] ?? ($element_styles['content'] ?? []));
 
+        $contentWidth = $options['contentWidth'] ?? 'contained';
+
         // Wrapper Classes
-        $wrapper_class = "wn-max-w-7xl wn-mx-auto wn-px-4";
+        $wrapper_class = $contentWidth === 'full' ? "wn-w-full" : "wn-max-w-7xl wn-mx-auto wn-px-4";
         $grid_class = "wn-mx-auto";
 
         if ($has_image && in_array($image_pos, ['left', 'right', 'image-left', 'image-right'])) {
@@ -275,8 +284,8 @@ class PageSSR
         // Section Styles (Background)
         $bg_type = $section_styles['backgroundType'] ?? 'solid';
         $bg_color = $section_styles['backgroundColor'] ?? '';
-        $padding = $section_styles['paddingTop'] ?? '';
-        $height_preset = $section_styles['heightPreset'] ?? '';
+        $pt = $section_styles['paddingTop'] ?? '';
+        $pb = $section_styles['paddingBottom'] ?? '';
 
         $css = "";
         if ($bg_type === 'gradient') {
@@ -289,22 +298,34 @@ class PageSSR
         }
 
         // Height Logic
+        $preset_padding = '';
         if ($height_preset === 'screen') {
             $css .= "min-height: 100vh; display: flex; align-items: center;";
-            $padding = '5rem'; // Default padding for screen to avoid edge collision
+            $preset_padding = '5rem'; // Default padding for screen to avoid edge collision
         } elseif ($height_preset === 'small') {
-            $padding = '2rem';
+            $preset_padding = '2rem';
         } elseif ($height_preset === 'large') {
-            $padding = '8rem';
+            $preset_padding = '8rem';
         } elseif ($height_preset === 'medium') {
-            $padding = '4rem';
+            $preset_padding = '4rem';
         }
 
-        if ($padding) $css .= "padding:{$padding} 0;";
+        if ($pt) {
+            $css .= "padding-top:{$pt};";
+        } elseif ($preset_padding) {
+            $css .= "padding-top:{$preset_padding};";
+        }
+
+        if ($pb) {
+            $css .= "padding-bottom:{$pb};";
+        } elseif ($preset_padding) {
+            $css .= "padding-bottom:{$preset_padding};";
+        }
 
         $style_attr = $css ? "style=\"{$css}\"" : "";
 
-        $inner_html = self::render_universal_row($props, 'left', $color_scheme, $element_styles);
+        $contentWidth = $section_styles['contentWidth'] ?? 'contained';
+        $inner_html = self::render_universal_row($props, 'left', $color_scheme, $element_styles, ['contentWidth' => $contentWidth]);
 
         return "<section id=\"{$id}\" class=\"wn-section wn-content wn-scheme--{$color_scheme}\" {$style_attr}>{$inner_html}</section>";
     }
@@ -316,8 +337,8 @@ class PageSSR
     {
         $bg_type = $section_styles['backgroundType'] ?? 'solid';
         $bg_color = $section_styles['backgroundColor'] ?? '';
-        $padding = $section_styles['paddingTop'] ?? '';
-        $height_preset = $section_styles['heightPreset'] ?? '';
+        $pt = $section_styles['paddingTop'] ?? '';
+        $pb = $section_styles['paddingBottom'] ?? '';
 
         $css = "";
         if ($bg_type === 'gradient') {
@@ -330,21 +351,33 @@ class PageSSR
         }
 
         // Height Logic
+        $preset_padding = '';
         if ($height_preset === 'screen') {
             $css .= "min-height: 100vh; display: flex; align-items: center;";
-            $padding = '5rem';
+            $preset_padding = '5rem';
         } elseif ($height_preset === 'small') {
-            $padding = '2rem';
+            $preset_padding = '2rem';
         } elseif ($height_preset === 'large') {
-            $padding = '8rem';
+            $preset_padding = '8rem';
         } elseif ($height_preset === 'medium') {
-            $padding = '4rem';
+            $preset_padding = '4rem';
         }
 
-        if ($padding) $css .= "padding:{$padding} 0;";
+        if ($pt) {
+            $css .= "padding-top:{$pt};";
+        } elseif ($preset_padding) {
+            $css .= "padding-top:{$preset_padding};";
+        }
+
+        if ($pb) {
+            $css .= "padding-bottom:{$pb};";
+        } elseif ($preset_padding) {
+            $css .= "padding-bottom:{$preset_padding};";
+        }
         $style_attr = $css ? "style=\"{$css}\"" : "";
 
-        $inner_html = self::render_universal_row($props, $layout, $color_scheme, $element_styles);
+        $contentWidth = $section_styles['contentWidth'] ?? 'contained';
+        $inner_html = self::render_universal_row($props, $layout, $color_scheme, $element_styles, ['contentWidth' => $contentWidth]);
 
         return "<section id=\"{$id}\" class=\"wn-section wn-image-text wn-scheme--{$color_scheme}\" {$style_attr}>{$inner_html}</section>";
     }