diff --git a/src/app/layout/account-switcher.component.html b/src/app/layout/account-switcher.component.html
index 153dd30aab..b095036ca1 100644
--- a/src/app/layout/account-switcher.component.html
+++ b/src/app/layout/account-switcher.component.html
@@ -28,6 +28,7 @@
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
(backdropClick)="toggle()"
[cdkConnectedOverlayOpen]="showSwitcher && isOpen"
+ [cdkConnectedOverlayPositions]="overlayPostition"
cdkConnectedOverlayMinWidth="250px"
>
diff --git a/src/app/layout/account-switcher.component.ts b/src/app/layout/account-switcher.component.ts
index 18315a7225..e56b00a814 100644
--- a/src/app/layout/account-switcher.component.ts
+++ b/src/app/layout/account-switcher.component.ts
@@ -1,6 +1,6 @@
import { animate, state, style, transition, trigger } from "@angular/animations";
+import { ConnectedPosition } from "@angular/cdk/overlay";
import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { StateService } from "jslib-common/abstractions/state.service";
@@ -55,6 +55,14 @@ export class AccountSwitcherComponent implements OnInit {
accounts: { [userId: string]: SwitcherAccount } = {};
activeAccountEmail: string;
serverUrl: string;
+ overlayPostition: ConnectedPosition[] = [
+ {
+ originX: "end",
+ originY: "bottom",
+ overlayX: "end",
+ overlayY: "top",
+ },
+ ];
get showSwitcher() {
return !Utils.isNullOrWhitespace(this.activeAccountEmail);