fix(modal): card-style modal now opens at full width on larger devices (

#20256)

fixes #20255

core/src/components/modal/modal.ios.scss

@@ -21,6 +21,7 @@
 
 :host(.modal-card) {
   --backdrop-opacity: 0.15;
+  --width: 100%;
 
   align-items: flex-end;
 }

core/src/components/modal/readme.md

@@ -157,6 +157,8 @@ export class CalendarComponentModule {}
 
 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
 
+If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.
+
 ```javascript
 import { IonRouterOutlet } from '@ionic/angular';
 

core/src/components/modal/usage/angular.md

@@ -135,6 +135,8 @@ export class CalendarComponentModule {}
 
 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
 
+If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.
+
 ```javascript
 import { IonRouterOutlet } from '@ionic/angular';