From 9b7b93734c5f063a0fdb35a89a8e14b0e6014c90 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 4 Nov 2026 21:16:46 +0100
Subject: [PATCH] Bugfix/height of dialogs on mobile (#8373)

* Fix height of dialogs on mobile

* Update changelog
---
 CHANGELOG.md                                              | 2 ++
 apps/client/src/app/app.component.ts                      | 4 +++-
 .../asset-profile-dialog-host.component.ts                | 4 +++-
 .../components/admin-platform/admin-platform.component.ts | 8 ++++++--
 .../src/app/components/admin-tag/admin-tag.component.ts   | 8 ++++++--
 .../app/components/admin-users/admin-users.component.ts   | 4 +++-
 .../access-dialog-host/access-dialog-host.component.ts    | 4 +++-
 .../account-dialog-host/account-dialog-host.component.ts  | 8 ++++++--
 .../portfolio/activities/activities-page.component.ts     | 6 ++++--
 .../activity-dialog-host.component.ts                     | 3 ++-
 .../portfolio/allocations/allocations-page.component.ts   | 4 +++-
 .../src/app/pages/register/register-page.component.ts     | 3 ++-
 apps/client/src/app/services/user/user.service.ts         | 4 +++-
 apps/client/src/index.html                                | 2 +-
 apps/client/src/styles.scss                               | 6 ++++++
 libs/ui/src/lib/benchmark/benchmark.component.ts          | 4 +++-
 .../historical-market-data-editor.component.ts            | 4 +++-
 17 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 93b19d8b9d..7dcec2f428 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index 53d3505a1c..bd9dece2f3 100644
--- a/apps/client/src/app/app.component.ts
+++ b/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'
         });
 
diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog-host/asset-profile-dialog-host.component.ts b/apps/client/src/app/components/admin-market-data/asset-profile-dialog-host/asset-profile-dialog-host.component.ts
index 26af45e20b..d97225a225 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog-host/asset-profile-dialog-host.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.ts b/apps/client/src/app/components/admin-platform/admin-platform.component.ts
index 10634d5dfb..cd5341142f 100644
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.ts b/apps/client/src/app/components/admin-tag/admin-tag.component.ts
index e46044d1e4..2481c7202a 100644
--- a/apps/client/src/app/components/admin-tag/admin-tag.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/components/admin-users/admin-users.component.ts b/apps/client/src/app/components/admin-users/admin-users.component.ts
index 8e459b4a40..e0bbf84d55 100644
--- a/apps/client/src/app/components/admin-users/admin-users.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/components/user-account-access/access-dialog-host/access-dialog-host.component.ts b/apps/client/src/app/components/user-account-access/access-dialog-host/access-dialog-host.component.ts
index 1adafb118b..bc1f579d86 100644
--- a/apps/client/src/app/components/user-account-access/access-dialog-host/access-dialog-host.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/pages/accounts/account-dialog-host/account-dialog-host.component.ts b/apps/client/src/app/pages/accounts/account-dialog-host/account-dialog-host.component.ts
index 0cc9476e3b..bf22be8ecb 100644
--- a/apps/client/src/app/pages/accounts/account-dialog-host/account-dialog-host.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
index b52339ddfa..2c442f0403 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/pages/portfolio/activities/activity-dialog-host/activity-dialog-host.component.ts b/apps/client/src/app/pages/portfolio/activities/activity-dialog-host/activity-dialog-host.component.ts
index 0d4ea8a14d..1315d5b52f 100644
--- a/apps/client/src/app/pages/portfolio/activities/activity-dialog-host/activity-dialog-host.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index 915c6833ab..e2ae6a6edf 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/pages/register/register-page.component.ts b/apps/client/src/app/pages/register/register-page.component.ts
index 6a4825c4da..18dee0ed9c 100644
--- a/apps/client/src/app/pages/register/register-page.component.ts
+++ b/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'
     });
 
diff --git a/apps/client/src/app/services/user/user.service.ts b/apps/client/src/app/services/user/user.service.ts
index ebc3a5fb96..9ea225f7c9 100644
--- a/apps/client/src/app/services/user/user.service.ts
+++ b/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'
           });
 
diff --git a/apps/client/src/index.html b/apps/client/src/index.html
index 105e7bcae9..05264b2ff3 100644
--- a/apps/client/src/index.html
+++ b/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" />
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index d734d0d447..e256200558 100644
--- a/apps/client/src/styles.scss
+++ b/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);
 }
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts
index 485a9e371f..d0749e20d5 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.ts
+++ b/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'
     });
 
diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts
index 03df8837c3..6da916a8ef 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts
+++ b/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'
     });