Bugfix/height of dialogs on mobile (#8373)

* Fix height of dialogs on mobile

* Update changelog

CHANGELOG.md

@@ -10,12 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the content of the pricing page
+- Changed the viewport to resize the content when the on-screen keyboard opens on _Android_ (`interactive-widget=resizes-content`)
 - Disabled the biometric authentication on all devices when generating a new _Security Token_
 - Improved the language localization for German (`de`)
 
 ### Fixed
 
 - Fixed the flickering of the navigation items in the header for logged-in users
+- Fixed the height of the dialogs on mobile
 - Fixed the description of the `ROOT_URL` requirement for the server of the Model Context Protocol (MCP) (experimental)
 
 ## 3.97.0 - 2026-11-02

apps/client/src/app/app.component.ts

@@ -337,7 +337,9 @@ export class GfAppComponent implements OnInit {
             impersonationId: this.impersonationId,
             locale: this.user?.settings?.locale
           },
-          height: this.deviceType === 'mobile' ? '98vh' : '80vh',
+          height: this.deviceType === 'mobile' ? '98dvh' : '80vh',
+          panelClass:
+            this.deviceType === 'mobile' ? 'gf-mobile-dialog' : undefined,
           width: this.deviceType === 'mobile' ? '100vw' : '50rem'
         });
 

apps/client/src/app/components/admin-market-data/asset-profile-dialog-host/asset-profile-dialog-host.component.ts

@@ -151,7 +151,9 @@ export class GfAssetProfileDialogHostComponent implements OnDestroy, OnInit {
         deviceType: this.deviceType(),
         locale: user?.settings?.locale ?? DEFAULT_LOCALE
       } satisfies AssetProfileDialogParams,
-      height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
+      height: this.deviceType() === 'mobile' ? '98dvh' : '80vh',
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/components/admin-platform/admin-platform.component.ts

@@ -184,7 +184,9 @@ export class GfAdminPlatformComponent implements OnInit {
       CreateOrUpdatePlatformDialogParams
     >(GfCreateOrUpdatePlatformDialogComponent, {
       data: {} satisfies CreateOrUpdatePlatformDialogParams,
-      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98dvh' : undefined,
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
@@ -224,7 +226,9 @@ export class GfAdminPlatformComponent implements OnInit {
           url
         }
       } satisfies CreateOrUpdatePlatformDialogParams,
-      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98dvh' : undefined,
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/components/admin-tag/admin-tag.component.ts

@@ -204,7 +204,9 @@ export class GfAdminTagComponent implements OnInit {
       CreateOrUpdateTagDialogParams
     >(GfCreateOrUpdateTagDialogComponent, {
       data: {} satisfies CreateOrUpdateTagDialogParams,
-      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98dvh' : undefined,
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
@@ -243,7 +245,9 @@ export class GfAdminTagComponent implements OnInit {
           name
         }
       } satisfies CreateOrUpdateTagDialogParams,
-      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98dvh' : undefined,
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -339,7 +339,9 @@ export class GfAdminUsersComponent implements OnInit {
         locale: this.user?.settings?.locale ?? DEFAULT_LOCALE,
         userId: aUserId
       } satisfies UserDetailDialogParams,
-      height: this.deviceType() === 'mobile' ? '98vh' : '60vh',
+      height: this.deviceType() === 'mobile' ? '98dvh' : '60vh',
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/components/user-account-access/access-dialog-host/access-dialog-host.component.ts

@@ -157,7 +157,9 @@ export class GfAccessDialogHostComponent implements OnDestroy, OnInit {
       CreateOrUpdateAccessDialogParams
     >(GfCreateOrUpdateAccessDialogComponent, {
       data,
-      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98dvh' : undefined,
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/pages/accounts/account-dialog-host/account-dialog-host.component.ts

@@ -256,7 +256,9 @@ export class GfAccountDialogHostComponent implements OnDestroy, OnInit {
           hasPermission(user?.permissions, permissions.updateActivity) &&
           !user?.settings?.isRestrictedView
       },
-      height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
+      height: this.deviceType() === 'mobile' ? '98dvh' : '80vh',
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
@@ -292,7 +294,9 @@ export class GfAccountDialogHostComponent implements OnDestroy, OnInit {
         account,
         user
       },
-      height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
+      height: this.deviceType() === 'mobile' ? '98dvh' : '80vh',
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -227,7 +227,8 @@ export class GfActivitiesPageComponent implements OnInit {
         deviceType: this.deviceType,
         user: this.user
       },
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType === 'mobile' ? '98dvh' : undefined,
+      panelClass: this.deviceType === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
 
@@ -259,7 +260,8 @@ export class GfActivitiesPageComponent implements OnInit {
         deviceType: this.deviceType,
         user: this.user
       },
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType === 'mobile' ? '98dvh' : undefined,
+      panelClass: this.deviceType === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/pages/portfolio/activities/activity-dialog-host/activity-dialog-host.component.ts

@@ -186,7 +186,8 @@ export class GfActivityDialogHostComponent implements OnDestroy, OnInit {
         user,
         accounts: user?.accounts
       },
-      height: deviceType === 'mobile' ? '98vh' : '80vh',
+      height: deviceType === 'mobile' ? '98dvh' : '80vh',
+      panelClass: deviceType === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: deviceType === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -670,7 +670,9 @@ export class GfAllocationsPageComponent implements OnInit {
           !this.user?.settings?.isRestrictedView,
         impersonationId: this.impersonationId
       },
-      height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
+      height: this.deviceType() === 'mobile' ? '98dvh' : '80vh',
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/pages/register/register-page.component.ts

@@ -89,7 +89,8 @@ export class GfRegisterPageComponent implements OnInit {
         needsToAcceptTermsOfService: this.hasPermissionForSubscription
       },
       disableClose: true,
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType === 'mobile' ? '98dvh' : undefined,
+      panelClass: this.deviceType === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '30rem'
     });
 

apps/client/src/app/services/user/user.service.ts

@@ -167,7 +167,9 @@ export class UserService extends ObservableStore<UserStoreState> {
               user
             },
             disableClose: true,
-            height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
+            height: this.deviceType() === 'mobile' ? '98dvh' : '80vh',
+            panelClass:
+              this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
             width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
           });
 

apps/client/src/index.html

@@ -13,7 +13,7 @@
     <meta content="${rootUrl}/${featureGraphicPath}" name="twitter:image" />
     <meta content="${title}" name="twitter:title" />
     <meta
-      content="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, width=device-width"
+      content="initial-scale=1, interactive-widget=resizes-content, maximum-scale=1, user-scalable=no, viewport-fit=cover, width=device-width"
       name="viewport"
     />
     <meta content="#FFFFFF" name="theme-color" />

apps/client/src/styles.scss

@@ -349,6 +349,12 @@ ngx-skeleton-loader {
   cursor: pointer;
 }
 
+.gf-mobile-dialog {
+  .mat-mdc-dialog-surface {
+    padding-bottom: max(0px, env(safe-area-inset-bottom) - 1dvh);
+  }
+}
+
 .gf-promotion-badge {
   background-color: var(--oc-orange-5);
 }

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -179,7 +179,9 @@ export class GfBenchmarkComponent implements OnInit {
         deviceType: this.deviceType(),
         locale: this.locale()
       },
-      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98dvh' : undefined,
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts

@@ -236,7 +236,9 @@ export class GfHistoricalMarketDataEditorComponent
         dateString: `${yearMonth}-${day}`,
         symbol: this.symbol
       },
-      height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
+      height: this.deviceType() === 'mobile' ? '98dvh' : '80vh',
+      panelClass:
+        this.deviceType() === 'mobile' ? 'gf-mobile-dialog' : undefined,
       width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });