fix(react, vue): inline modals apply ion-page class (#27481)

Issue number: resolves #27470

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Passing multiple elements in to an inline modal causes `.ion-page` to
not get set. This causes content to get pushed off the bottom of the
modal equal to the height of the header. React has some special CSS that
prevents this:
eb2772c0ce/packages/react/src/components/createInlineOverlayComponent.tsx (L137-L140)

However, I think this should be delegated to `.ion-page` instead so the
behavior is consistent across frameworks. For example, Angular uses
`.ion-page`:
eb2772c0ce/angular/src/directives/overlays/modal.ts (L82)

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Inline overlays in Ionic React and Ionic Vue wrap child content in
`.ion-delegate-host.ion-page`.
- Removed the custom flex styles from Ionic React as `.ion-page` has its
own styles.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Revised Design Doc:
https://github.com/ionic-team/ionic-framework-design-documents/pull/84

packages/react/src/components/IonModal.tsx

@@ -5,5 +5,6 @@ import { createInlineOverlayComponent } from './createInlineOverlayComponent';
 
 export const IonModal = /*@__PURE__*/ createInlineOverlayComponent<JSX.IonModal, HTMLIonModalElement>(
   'ion-modal',
-  defineCustomElement
+  defineCustomElement,
+  true
 );

packages/react/src/components/createInlineOverlayComponent.tsx

@@ -29,7 +29,8 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
 
 export const createInlineOverlayComponent = <PropType, ElementType>(
   tagName: string,
-  defineCustomElement?: () => void
+  defineCustomElement?: () => void,
+  hasDelegateHost?: boolean
 ) => {
   if (defineCustomElement) {
     defineCustomElement();
@@ -116,6 +117,18 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
         style,
       };
 
+      /**
+       * Some overlays need `.ion-page` so content
+       * takes up the full size of the parent overlay.
+       */
+      const getWrapperClasses = () => {
+        if (hasDelegateHost) {
+          return `${DELEGATE_HOST} ion-page`;
+        }
+
+        return DELEGATE_HOST;
+      };
+
       return createElement(
         'template',
         {},
@@ -132,14 +145,8 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
             ? createElement(
                 'div',
                 {
-                  id: 'ion-react-wrapper',
                   ref: this.wrapperRef,
-                  className: 'ion-delegate-host',
-                  style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                  },
+                  className: getWrapperClasses(),
                 },
                 children
               )
@@ -194,3 +201,5 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
   };
   return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
 };
+
+const DELEGATE_HOST = 'ion-delegate-host';