From a6176aaf2ccfb5c05af5b1fe9e40c26fdf4b1ee7 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Tue, 13 Aug 2024 14:18:04 -0500
Subject: [PATCH] [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
---
 .../extension-anon-layout-wrapper.component.html              | 1 +
 .../extension-anon-layout-wrapper.component.ts                | 1 +
 .../src/angular/anon-layout/anon-layout-wrapper.component.ts  | 1 +
 libs/auth/src/angular/anon-layout/anon-layout.component.ts    | 4 ++++
 4 files changed, 7 insertions(+)

diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
index e7082f40196..d5273fd9fb2 100644
--- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
+++ b/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>
diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
index a16ca5862cf..7a5b156a506 100644
--- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
+++ b/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() {
diff --git a/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts
index a71f9101c93..84a9b4bcf86 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts
+++ b/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() {
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.ts b/libs/auth/src/angular/anon-layout/anon-layout.component.ts
index 19dafa732ab..fc3026dad34 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.ts
+++ b/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) {