[PM-10799] Login UI Width (#10506)

* reset `maxWidth` attribute during page change

* set default value for `maxWidth` if null or undefined is passed

* implement `maxWidth` for extension implementation of Anon Layout

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html

@@ -20,6 +20,7 @@
     [showReadonlyHostname]="showReadonlyHostname"
     [hideLogo]="true"
     [decreaseTopPadding]="true"
+    [maxWidth]="maxWidth"
   >
     <router-outlet></router-outlet>
     <router-outlet slot="secondary" name="secondary"></router-outlet>

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts

@@ -189,6 +189,7 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
     this.showAcctSwitcher = null;
     this.showBackButton = null;
     this.showLogo = null;
+    this.maxWidth = null;
   }
 
   ngOnDestroy() {

libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts

@@ -129,6 +129,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     this.pageSubtitle = null;
     this.pageIcon = null;
     this.showReadonlyHostname = null;
+    this.maxWidth = null;
   }
 
   ngOnDestroy() {

libs/auth/src/angular/anon-layout/anon-layout.component.ts

@@ -76,6 +76,10 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
       const theme = await firstValueFrom(this.themeStateService.selectedTheme$);
       await this.updateIcon(theme);
     }
+
+    if (changes.maxWidth) {
+      this.maxWidth = changes.maxWidth.currentValue ?? "md";
+    }
   }
 
   private async updateIcon(theme: string) {