CASH-1911: Add scrollbar and scroll to error message for short viewports

src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js

@@ -159,13 +159,37 @@ describe("save-progress-popup-question ", () => {
             wrapper.vm.selectContactMethod("PhoneAnswer");
             wrapper.vm.modal.validate = jest.fn().mockResolvedValue({ valid: true });
             const resetSpy = jest.spyOn(wrapper.vm, "resetPhoneSendButtonStyle");
+            const scrollSpy = jest
+                .spyOn(wrapper.vm, "scrollConsentIntoView")
+                .mockResolvedValue(undefined);
 
             await wrapper.vm.validatePhoneAndSave();
 
             expect(wrapper.vm.showConsentErrors).toBe(true);
+            expect(scrollSpy).toHaveBeenCalled();
             expect(resetSpy).toHaveBeenCalled();
         });
 
+        test("should scroll consent checkboxes into view", async () => {
+            const { wrapper } = setupMocks({
+                props: {
+                    modalWidgetName: "SaveProgressPopupWidget",
+                },
+            });
+            const mockScrollIntoView = jest.fn();
+            const consentEl = document.createElement("fieldset");
+            consentEl.className = "save-progress-popup-sms-consent";
+            consentEl.scrollIntoView = mockScrollIntoView;
+            wrapper.element.appendChild(consentEl);
+
+            await wrapper.vm.scrollConsentIntoView();
+
+            expect(mockScrollIntoView).toHaveBeenCalledWith({
+                behavior: "smooth",
+                block: "nearest",
+            });
+        });
+
         test("should reset the send button loader when phone validation fails", async () => {
             const { wrapper } = setupMocks({
                 props: {

src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

@@ -43,6 +43,7 @@
                     isRequired
                     validationRules="phone-number-required" />
                 <saveProgressPopupSmsConsentQuestion
+                    ref="smsConsentQuestion"
                     v-model="smsConsent"
                     :consentCopy="smsConsentCopy"
                     :isDisabled="isProgressSaved"
@@ -240,6 +241,7 @@ export default {
                     !hasSaveProgressSmsConsentSelection(this.smsConsent, this.showConsentManagement)
                 ) {
                     this.showConsentErrors = true;
+                    await this.scrollConsentIntoView();
                     return;
                 }
 
@@ -252,6 +254,14 @@ export default {
         resetPhoneSendButtonStyle() {
             this.$refs.phoneSendButton?.resetButtonStyle();
         },
+        async scrollConsentIntoView() {
+            await this.$nextTick();
+            const consentEl =
+                this.$refs.smsConsentQuestion?.$el ??
+                this.$el?.querySelector(".save-progress-popup-sms-consent");
+
+            consentEl?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        },
         async saveProgress() {
             await saveProgressPopupContactToStore(this.dispatchStoreAction, {
                 contactMethod: this.contactMethod,
@@ -372,6 +382,11 @@ export default {
         }
     }
     .modal.modal-component .modal-dialog .modal-content {
+        max-height: calc(100dvh - 1rem);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
         p.modal-body {
             padding: 0;
         }
@@ -379,6 +394,9 @@ export default {
             display: flex;
             flex-direction: column;
             padding: 0 1.5rem;
+            overflow-y: auto;
+            flex: 1 1 auto;
+            min-height: 0;
 
             .textbox-question {
                 padding: 0;
@@ -499,6 +517,8 @@ export default {
                 text-align: left;
                 order: 3;
                 margin: 0;
+                max-height: calc(100dvh - 30rem);
+                overflow-y: auto;
 
                 a {
                     text-decoration: none;