Fix size logic

CruGlobal · Jan 13, 2025 · 2b36860 · 2b36860
1 parent d865fbb
commit 2b36860
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/src/common/components/registerAccountModal/registerAccountModal.component.js b/src/common/components/registerAccountModal/registerAccountModal.component.js
@@ -148,11 +148,9 @@ class RegisterAccountModalController {
 
   stateChanged (state) {
     this.element.dataset.state = state
-    if (this.welcomeBack && state === 'sign-in') {
-      // Use a medium (instead of small) modal for sign in models when they show the welcome back message
-      this.setModalSize('md')
-    } else if (state === 'sign-in' || state === 'sign-up') {
-      // Use a small modal for sign in modals without the welcome back message and sign up modals
+    if ((!this.welcomeBack && state === 'sign-in') || state === 'sign-up') {
+      // Use a small modal for sign in modals without a welcome back message and for sign up modals
+      // regardless of the screen size because they can't take advantage of the extra width
       this.setModalSize('sm')
     } else if (this.$window.innerWidth >= 1200) {
       // Use a large modal on wide screens for other modals

diff --git a/src/common/components/registerAccountModal/registerAccountModal.component.spec.js b/src/common/components/registerAccountModal/registerAccountModal.component.spec.js
@@ -250,12 +250,20 @@ describe('registerAccountModal', function () {
   })
 
   describe('stateChanged( state )', () => {
+    let originalWidth
+
     beforeEach(() => {
+      originalWidth = $ctrl.$window.innerWidth
+
       $ctrl.state = 'unknown'
       jest.spyOn($ctrl, 'setModalSize').mockImplementation(() => {})
       jest.spyOn($ctrl, 'scrollModalToTop').mockImplementation(() => {})
     })
 
+    afterEach(() => {
+      $ctrl.$window.innerWidth = originalWidth
+    })
+
     it('should scroll to the top of the modal', () => {
       $ctrl.stateChanged()
 
@@ -299,10 +307,17 @@ describe('registerAccountModal', function () {
         $ctrl.welcomeBack = true
       })
 
-      it('sets the sign-in modal size to medium', () => {
+      it('sets the sign-in modal size to large on wide screens', () => {
+        $ctrl.$window.innerWidth = 1200
         $ctrl.stateChanged('sign-in')
 
-        expect($ctrl.setModalSize).toHaveBeenCalledWith('md')
+        expect($ctrl.setModalSize).toHaveBeenCalledWith('lg')
+      })
+
+      it('sets the sign-in modal size to small on narrow screens', () => {
+        $ctrl.stateChanged('sign-in')
+
+        expect($ctrl.setModalSize).toHaveBeenCalledWith('sm')
       })
 
       it('sets the sign-up modal size to small', () => {
@@ -319,17 +334,10 @@ describe('registerAccountModal', function () {
     })
 
     describe('when the screen is wide', () => {
-      let originalWidth
-
       beforeEach(() => {
-        originalWidth = $ctrl.$window.innerWidth
         $ctrl.$window.innerWidth = 1200
       })
 
-      afterEach(() => {
-        $ctrl.$window.innerWidth = originalWidth
-      })
-
       it('sets the sign-in modal size to small', () => {
         $ctrl.stateChanged('sign-in')