<ion-content>  
    <div class="main-body" [ngClass]="{ 'scale': Ready && view.CanZoom }">
        <ng-container *ngIf="HasMenu === true">
            <ion-menu #mnmenu id="mnmenu" side="start" menuId="main" contentId="content-main-menu">
                <ng-content select="upp-application-menu"></ng-content>
            </ion-menu>
            <ion-nav #ionnav id="content-main-menu">
                <ng-content select="upp-application-main"></ng-content>
            </ion-nav>    
        </ng-container>
        <ng-container *ngIf="HasMenu !== true">
            <ng-content></ng-content>
        </ng-container>
    </div>
</ion-content>    

./upp-application.scss

:host {
    .main-body {
        &.scale {
            transform-origin: 0 0;
            transform: scale(var(--body-scale-level, 1));
            width: var(--body-scale-width, 100%);
            height: var(--body-scale-height, 100%);      
        }

        &.zoom {
            zoom: var(--body-zoom-level, 100%);
            -webkit-text-size-adjust: var(--body-zoom-level, 100%);
            width: var(--body-zoom-width);
            height: var(--body-zoom-height);
        }
    }

    [hidden] {
        transform: none;
    }   

    .main-body {
        flex: 1;
    }

    ::ng-deep upp-application-page {
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: nowrap;

        upp-panel {
            flex-shrink: 0;
    
            &[size="large"] {
                flex: 1;
            
                &:only-child {
                    flex: 0 0 100%;
                }
            }        
        }
    }
}