docs(IonPage): note that IonPage is required for styling

Author: ShaneK

docs/react/navigation.md

@@ -146,6 +146,8 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 
 The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';

docs/vue/navigation.md

@@ -494,6 +494,8 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```vue
 <template>
   <ion-page>

versioned_docs/version-v6/react/navigation.md

@@ -146,6 +146,8 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 
 The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';

versioned_docs/version-v6/vue/navigation.md

@@ -552,6 +552,8 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```html
 <template>
   <ion-page>

versioned_docs/version-v7/react/navigation.md

@@ -146,6 +146,8 @@ const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
 
 The `IonPage` component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```tsx
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';

versioned_docs/version-v7/vue/navigation.md

@@ -494,6 +494,8 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
+`IonPage` is also required for proper styling. It provides a flex container that ensures page content, such as `IonContent`, is properly sized and does not overlap other UI elements like `IonTabBar`.
+
 ```vue
 <template>
   <ion-page>