fix: Simplify Help page layout (remove sticky)

- Sticky not possible when page is inside overflow-auto container
- Using standard flexbox layout where sidebar and content scroll together
- Separate mobile (fixed overlay) and desktop (inline) sidebars
- Clean, simple layout matching typical documentation patterns

admin-spa/src/routes/Help/index.tsx

@@ -3,7 +3,6 @@ import { useSearchParams } from 'react-router-dom';
 import { Book, ChevronRight, FileText, Settings, Layers, Puzzle, Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { useApp } from '@/contexts/AppContext';
 import DocContent from './DocContent';
 import type { DocSection } from './types';
 
@@ -22,23 +21,8 @@ export default function Help() {
     const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});
     const [sidebarOpen, setSidebarOpen] = useState(false);
 
-    const { isStandalone } = useApp();
-
     const currentSlug = searchParams.get('doc') || 'getting-started';
 
-    // Calculate sticky top position based on mode
-    // This matches the submenu bar logic in App.tsx:
-    // - Standalone/fullscreen: top-0 (header already handles offset)
-    // - WP Admin: top-[calc(7rem+32px)] = 144px (header 64px + topnav 48px + wp-admin bar 32px)
-    const sidebarStickyTop = isStandalone
-        ? 'top-0'
-        : 'top-[calc(7rem+32px)]';
-
-    // Height calculation matches App.tsx Sidebar pattern
-    const sidebarHeight = isStandalone
-        ? 'h-[calc(100vh-64px)]'
-        : 'h-[calc(100vh-7rem-32px)]';
-
     // Fetch documentation registry
     useEffect(() => {
         const fetchDocs = async () => {
@@ -85,8 +69,8 @@ export default function Help() {
     const isActive = (slug: string) => slug === currentSlug;
 
     return (
-        <div className="flex">
-            {/* Mobile menu button - only show on small screens */}
+        <>
+            {/* Mobile menu button */}
             <Button
                 variant="ghost"
                 size="icon"
@@ -107,9 +91,7 @@ export default function Help() {
             {/* Mobile sidebar - fixed overlay */}
             <aside
                 className={cn(
-                    "lg:hidden fixed left-0 z-40 w-72 bg-background border-r overflow-y-auto",
-                    sidebarStickyTop,
-                    sidebarHeight,
+                    "lg:hidden fixed left-0 top-0 bottom-0 z-40 w-72 bg-background border-r overflow-y-auto",
                     sidebarOpen ? "block" : "hidden"
                 )}
             >
@@ -123,31 +105,35 @@ export default function Help() {
                 />
             </aside>
 
-            {/* Desktop sidebar - sticky */}
-            <aside
-                className={cn(
-                    "hidden lg:block w-72 flex-shrink-0 border-r bg-muted/30 overflow-y-auto sticky",
-                    sidebarStickyTop,
-                    sidebarHeight
-                )}
-            >
-                <SidebarContent
-                    loading={loading}
-                    sections={sections}
-                    expandedSections={expandedSections}
-                    toggleSection={toggleSection}
-                    selectDoc={selectDoc}
-                    isActive={isActive}
-                />
-            </aside>
+            {/* Desktop layout - simple flexbox, no sticky */}
+            <div className="hidden lg:flex gap-0">
+                {/* Desktop sidebar - flex-shrink-0 keeps it visible */}
+                <aside className="w-72 flex-shrink-0 border-r bg-muted/30 min-h-[600px]">
+                    <SidebarContent
+                        loading={loading}
+                        sections={sections}
+                        expandedSections={expandedSections}
+                        toggleSection={toggleSection}
+                        selectDoc={selectDoc}
+                        isActive={isActive}
+                    />
+                </aside>
 
-            {/* Main content - uses page scroll */}
-            <main className="flex-1 min-w-0">
-                <div className="max-w-4xl mx-auto py-6 px-6 lg:px-10">
+                {/* Desktop content */}
+                <main className="flex-1 min-w-0">
+                    <div className="max-w-4xl mx-auto py-6 px-10">
+                        <DocContent slug={currentSlug} />
+                    </div>
+                </main>
+            </div>
+
+            {/* Mobile content - shown when sidebar is hidden */}
+            <div className="lg:hidden">
+                <div className="max-w-4xl mx-auto py-6 px-6">
                     <DocContent slug={currentSlug} />
                 </div>
-            </main>
-        </div>
+            </div>
+        </>
     );
 }
 
@@ -169,7 +155,7 @@ function SidebarContent({
 }) {
     return (
         <>
-            <div className="p-4 border-b bg-muted/30 sticky top-0">
+            <div className="p-4 border-b bg-muted/30">
                 <h2 className="text-lg font-semibold flex items-center gap-2">
                     <Book className="w-5 h-5" />
                     Documentation