Adjust overlay position of EnvironmentSelectorComponent for new layout.

Since the switcher is located at the bottom of the screen we need to position it up above the trigger button so that it is not cut off.

apps/browser/src/popup/app-routing.module.ts

@@ -436,6 +436,17 @@ const routes: Routes = [
               path: "",
               component: EnvironmentSelectorComponent,
               outlet: "environment-selector",
+              data: {
+                overlayPosition: [
+                  {
+                    originX: "start",
+                    originY: "top",
+                    overlayX: "start",
+                    overlayY: "bottom",
+                  },
+                ],
+                test: "test",
+              },
             },
           ],
         },
@@ -467,7 +478,21 @@ const routes: Routes = [
           children: [
             { path: "", component: LoginComponent },
             { path: "", component: LoginSecondaryContentComponent, outlet: "secondary" },
-            { path: "", component: EnvironmentSelectorComponent, outlet: "environment-selector" },
+            {
+              path: "",
+              component: EnvironmentSelectorComponent,
+              outlet: "environment-selector",
+              data: {
+                overlayPosition: [
+                  {
+                    originX: "start",
+                    originY: "top",
+                    overlayX: "start",
+                    overlayY: "bottom",
+                  },
+                ],
+              },
+            },
           ],
         },
       ],

apps/desktop/src/app/app-routing.module.ts

@@ -188,6 +188,16 @@ const routes: Routes = [
               path: "",
               component: EnvironmentSelectorComponent,
               outlet: "environment-selector",
+              data: {
+                overlayPosition: [
+                  {
+                    originX: "start",
+                    originY: "top",
+                    overlayX: "start",
+                    overlayY: "bottom",
+                  },
+                ],
+              },
             },
           ],
         },

libs/angular/src/auth/components/environment-selector.component.ts

@@ -1,8 +1,8 @@
 import { animate, state, style, transition, trigger } from "@angular/animations";
 import { ConnectedPosition } from "@angular/cdk/overlay";
-import { Component, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, Output, Input, OnInit, OnDestroy } from "@angular/core";
-import { Router } from "@angular/router";
+import { Router, ActivatedRoute } from "@angular/router";
-import { Observable, map } from "rxjs";
+import { Observable, map, Subject, takeUntil } from "rxjs";
 
 import {
   EnvironmentService,
@@ -34,11 +34,9 @@ import {
     ]),
   ],
 })
-export class EnvironmentSelectorComponent {
+export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
   @Output() onOpenSelfHostedSettings = new EventEmitter();
-  protected isOpen = false;
+  @Input() overlayPosition: ConnectedPosition[] = [
-  protected ServerEnvironmentType = Region;
-  protected overlayPosition: ConnectedPosition[] = [
     {
       originX: "start",
       originY: "bottom",
@@ -47,6 +45,8 @@ export class EnvironmentSelectorComponent {
     },
   ];
 
+  protected isOpen = false;
+  protected ServerEnvironmentType = Region;
   protected availableRegions = this.environmentService.availableRegions();
   protected selectedRegion$: Observable<RegionConfig | undefined> =
     this.environmentService.environment$.pipe(
@@ -54,11 +54,27 @@ export class EnvironmentSelectorComponent {
       map((r) => this.availableRegions.find((ar) => ar.key === r)),
     );
 
+  private destroy$ = new Subject<void>();
+
   constructor(
     protected environmentService: EnvironmentService,
     protected router: Router,
+    private route: ActivatedRoute,
   ) {}
 
+  ngOnInit() {
+    this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
+      if (data && data["overlayPosition"]) {
+        this.overlayPosition = data["overlayPosition"];
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   async toggle(option: Region) {
     this.isOpen = !this.isOpen;
     if (option === null) {