Merge branch 'ADP-4469' into develop

# Conflicts:
#	versioned_docs/version-3.0/autopilot-how-it-works.md

Author: eandreeva-twr

src/components/SidebarMenu/index.jsx

@@ -6,41 +6,41 @@ import { isMobileSdkDocument, getCorrespondingDocId } from '../../lib/sidebarMap
 
 
 export default function SidebarMenu() {
-  
+
   const router = useHistory();
   const { pathname } = router.location;
   const activeDocContext = useActiveDocContext();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
-  
+
   // Debug: log the pathname and active context
-  
+
   // Define platform options with correct paths
   const platforms = [
     { name: 'iOS', path: '/docs/ios-sdk-overview', sidebarId: 'sdkios' },
     { name: 'Android', path: '/docs/android-sdk-overview', sidebarId: 'sdkandroid' },
     { name: 'Flutter', path: '/docs/flutter-sdk-overview', sidebarId: 'sdkflutter' },
     { name: 'React Native', path: '/docs/react-native-sdk-overview', sidebarId: 'sdkreactnative' },
     { name: 'Unity', path: '/docs/unity-sdk-overview', sidebarId: 'sdkunity' },
-      { name: 'Kotlin Multiplatform', path: '/docs/kmp-sdk-overview', sidebarId: 'sdkkmp' },
-      { name: 'Capacitor (Beta)', path: '/docs/capacitor-sdk-overview', sidebarId: 'sdkcapacitor' },
+    { name: 'Kotlin Multiplatform', path: '/docs/kmp-sdk-overview', sidebarId: 'sdkkmp' },
+    { name: 'Capacitor (Beta)', path: '/docs/capacitor-sdk-overview', sidebarId: 'sdkcapacitor' },
   ];
-  
+
   // Try to detect current platform from active sidebar
   let currentPlatform = platforms[0]; // Default to iOS
 
-  
+
   if (activeDocContext && activeDocContext.sidebar) {
     const sidebarId = activeDocContext.sidebar;
     const detectedPlatform = platforms.find(p => p.sidebarId === sidebarId);
     if (detectedPlatform) {
       currentPlatform = detectedPlatform;
     }
   }
-  
+
   // Fallback to URL-based detection
   if (currentPlatform === platforms[0]) {
-    
+
     // More specific URL-based detection
     if (pathname.includes('react-native-sdk') || pathname.includes('reactnative')) {
       currentPlatform = platforms.find(p => p.sidebarId === 'sdkreactnative');
@@ -53,9 +53,9 @@ export default function SidebarMenu() {
     } else if (pathname.includes('unity-sdk') || pathname.includes('unity')) {
       currentPlatform = platforms.find(p => p.sidebarId === 'sdkunity');
     } else if (pathname.includes('capacitor-sdk') || pathname.includes('capacitor')) {
-        currentPlatform = platforms.find(p => p.sidebarId === 'sdkcapacitor');
+      currentPlatform = platforms.find(p => p.sidebarId === 'sdkcapacitor');
     } else if (pathname.includes('kmp') || pathname.includes('kotlin-multiplatform')) {
-        currentPlatform = platforms.find(p => p.sidebarId === 'sdkkmp');
+      currentPlatform = platforms.find(p => p.sidebarId === 'sdkkmp');
     } else {
       // Fallback to the old logic
       currentPlatform = platforms.find(p => {
@@ -69,11 +69,11 @@ export default function SidebarMenu() {
   const handlePlatformChange = (platform) => {
     // Get the current document ID
     const currentDocId = activeDocContext?.activeDoc?.id;
-    
+
     if (currentDocId) {
       // Try to find the corresponding document in the target platform
       const correspondingDocId = getCorrespondingDocId(currentDocId, platform.sidebarId);
-      
+
       if (correspondingDocId) {
         // Navigate to the corresponding document
         router.push(`/docs/${correspondingDocId}`);
@@ -87,27 +87,27 @@ export default function SidebarMenu() {
     }
   };
 
-  
+
   // Get the current document ID from activeDocContext
   const currentDocId = activeDocContext?.activeDoc?.id;
 
-  
+
   // Check if current document belongs to a mobile SDK sidebar
   const isMobileSdkPage = currentDocId && isMobileSdkDocument(currentDocId);
 
-  
+
   // Also check if we're on a platform overview page by URL
   const isOverviewPage = pathname.includes('-sdk-overview');
-  
+
   // Show switcher if it's a mobile SDK page OR an overview page
   const shouldShowSwitcher = isMobileSdkPage || isOverviewPage;
 
   // Add/remove CSS class to sidebar container based on switcher visibility
   useEffect(() => {
-    
+
     // Find the sidebar container
     const sidebarContainer = document.querySelector('.theme-doc-sidebar-container');
-    
+
     if (sidebarContainer) {
       if (shouldShowSwitcher) {
         sidebarContainer.classList.add('platform-switcher-visible');
@@ -130,16 +130,13 @@ export default function SidebarMenu() {
     return null;
   }
 
-  
+
   return (
     <div style={{
       width: '100%',
       padding: '24px 16px 8px 16px',
       background: '#f8f9fa',
       borderBottom: '1px solid #e9ecef',
-      position: 'sticky',
-      top: '0',
-      zIndex: '10',
       flexShrink: 0,
       boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
     }}>
@@ -148,14 +145,14 @@ export default function SidebarMenu() {
         alignItems: 'center',
         gap: '8px'
       }}>
-                        <div style={{
-                  color: '#495057', 
-                  fontWeight: '600', 
-                  fontSize: '15px',
-                  whiteSpace: 'nowrap'
-                }}>
-                  Platform:
-                </div>
+        <div style={{
+          color: '#495057',
+          fontWeight: '600',
+          fontSize: '15px',
+          whiteSpace: 'nowrap'
+        }}>
+          Platform:
+        </div>
         <div style={{ position: 'relative', flex: 1 }}>
           <button
             style={{
@@ -191,7 +188,7 @@ export default function SidebarMenu() {
               <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
             </svg>
           </button>
-          
+
           {isDropdownOpen && (
             <div style={{
               position: 'absolute',

src/css/custom.css

@@ -1040,13 +1040,5 @@ details code {
 }
 
 /* Ensure sidebar remains scrollable */
-.theme-doc-sidebar-container.platform-switcher-visible [class*="sidebarViewport"] {
-  overflow-y: auto !important;
-  height: 100% !important;
-}
 
-.theme-doc-sidebar-container.platform-switcher-visible [class*="sidebar_src-theme-DocSidebar-Desktop"] {
-  overflow-y: auto !important;
-  height: 100% !important;
-}
 

src/theme/DocSidebar/Desktop/index.jsx

@@ -25,7 +25,9 @@ function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }) {
     >
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <SidebarMenu />
-      <Content path={path} sidebar={sidebar} />
+      <div className={styles.contentWrapper}>
+        <Content path={path} sidebar={sidebar} />
+      </div>
       {hideable && <CollapseButton onClick={onCollapse} />}
     </div>
   );

src/theme/DocSidebar/Desktop/styles.module.css

@@ -1,7 +1,8 @@
 .sidebar {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: auto !important;
+  bottom: 0;
   width: var(--doc-sidebar-width);
   position: fixed;
   top: 0;
@@ -11,11 +12,13 @@
   border-right: 1px solid var(--ifm-toc-border-color);
   transition: transform var(--ifm-transition-fast) ease;
   padding-top: 45px;
+  box-sizing: border-box;
 }
 
 .sidebarWithHideableNavbar {
   top: var(--ifm-navbar-height);
-  height: calc(100% - var(--ifm-navbar-height));
+  height: auto !important;
+  bottom: 0;
 }
 
 .sidebarHidden {
@@ -37,4 +40,18 @@
   height: 2rem;
 }
 
+.contentWrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
 
+/* Target the inner menu to make it scrollable */
+.contentWrapper :global(.menu) {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-bottom: 300px !important;
+  box-sizing: border-box;
+}

versioned_docs/version-3.0/autopilot-how-it-works.md

@@ -4,6 +4,7 @@ description: "Understand the logic behind the Growth Autopilot and trust us to g
 metadataTitle: "Growth Autopilot | Adapty Docs"
 keywords: ['autopilot', 'growth autopilot']
 ---
+import ZoomImage from '@site/src/components/ZoomImage';
 
 [Growth Autopilot](autopilot.md) helps you figure out which experiments to run based on your actual performance data and how similar apps in your market are doing. Instead of guessing what might work, you get specific recommendations for tests that are more likely to improve your results.
 
@@ -36,7 +37,9 @@ This gives Autopilot a baseline to work from before suggesting any changes.
 We don't use your app's performance data to train recommendations for other apps. Your data stays private.
 :::
 
-#### Market benchmark data
+<ZoomImage id="app-analysis.webp" width="700px" />
+
+#### Competitor data
 
 Autopilot compares your setup with similar apps in your market using public information like pricing, subscription structures, and common patterns in your category. This is based on third-party and public data, not private metrics from other Adapty clients.
 
@@ -46,12 +49,16 @@ This way, you're testing strategies that already work for apps like yours, not j
 Autopilot selects relevant competitors automatically based on what you can realistically compete with. We generally recommend sticking with these suggestions rather than adding apps that are too far ahead or too far behind. If your app falls into several categories, you might want to adjust the list to focus on the most relevant market segment.
 :::
 
+<ZoomImage id="competitors-analysis.webp" width="700px" />
+
 #### Industry benchmarks
 
 Autopilot also uses category-level data to show how you compare to the industry average. This data is anonymized and aggregated, not tied to specific apps.
 
 For example, your conversion funnel might be compared against the average for apps in your category. This helps you see if you're underperforming, doing about average, or already ahead of the curve.
 
+<ZoomImage id="industry-benchmarks.webp" width="700px" />
+
 ## How Autopilot decides what to recommend
 
 Autopilot creates a sequence of experiments to improve your paywall step by step. Instead of testing everything at once, it focuses on one change at a time so you can see what actually works.
@@ -74,9 +81,19 @@ Here's how it works:
 
    Autopilot only suggests tests you can launch with your existing products and setup, or with small changes like creating a new product or adjusting a price. The goal is to keep testing fast and manageable.
 
+5. **Show you the reasoning**
+   
+   For each recommendation, Autopilot provides a clear hypothesis that explains exactly why this test is worth running. You'll see how your current metrics compare to competitors and industry averages, what the opportunity is, and which key metrics we expect to improve.
+
 This turns experimentation into a repeatable process where each test teaches you something and moves you toward a more effective paywall.
 
+
+<ZoomImage id="growth-plan.webp" width="700px" />
+
 ## What happens after you complete the experiments
 
 Once you finish all the recommended experiments and see an increase in revenue, your work isn't done. After some time with your new setup, you can rerun the analysis and start a fresh round of experiments. You might even choose to compete with more advanced competitors now that you've optimized your baseline. This iterative approach helps you keep maximizing your revenue as your app grows and the market evolves.
 
+:::tip
+More features are coming! Expect even smarter suggestions, an idea library to explore proven strategies, and the ability to launch experiments in one click. Autopilot will keep getting better at helping you grow.
+:::

versioned_docs/version-3.0/autopilot.md

@@ -161,4 +161,21 @@ The recommendations page will show you the target number of subscribers and the
     margin: '0 auto' /* center alignment */
   }}
 />
+</Zoom>
+
+## Why will it work?
+
+Every recommendation comes with a clear hypothesis that explains the reasoning behind it. You'll see how your current metrics stack up against competitors and industry averages, what opportunity we've identified, and which key metrics the test is expected to improve.
+
+For a detailed look at how Autopilot analyzes your growth strategy and which data sources it uses to create recommendations, check out [our article](autopilot-how-it-works.md).
+
+<Zoom>
+  <img src={require('./img/hypothesis.png').default}
+  style={{
+    border: '1px solid #727272', /* border width and color */
+    width: '700px', /* image width */
+    display: 'block', /* for alignment */
+    margin: '0 auto' /* center alignment */
+  }}
+/>
 </Zoom>