From 8b1845c744dc12fee7bdd2c111fd1fce472b05dd Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Thu, 5 Feb 2026 10:51:08 -0300 Subject: [PATCH 1/5] fix: enhance modal style on mobile --- .../shared/components/ModalForm/styles.scss | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss index 705ebe0754a..41244fd2e93 100644 --- a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss +++ b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss @@ -2,7 +2,15 @@ outline: none; width: 100%; padding: 1rem; - overflow-y: scroll; + max-height: 90dvh; + position: fixed; + top: 50%; + left: 0; + transform: translateY(-50%); + + @at-root body:has(&) { + position: relative; + } &[data-entering="true"] { animation: modal-fade 300ms, modal-zoom 600ms; @@ -29,17 +37,18 @@ } &__overlay { - position: fixed; + position: absolute; top: 0; left: 0; width: 100vw; - height: var(--visual-viewport-height); + height: 100%; background: rgba(0 0 0 / .7); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; + overflow: hidden; &[data-loading="true"] { display: none; @@ -69,9 +78,9 @@ &__close { display: flex; - position: fixed; - top: 25px; - right: 25px; + position: absolute; + top: var(--givewp-spacing-2); + right: var(--givewp-spacing-2); padding: .75rem; width: fit-content; background: #e7e8ed; @@ -91,14 +100,9 @@ background-color: darken(#e7e8ed, 10%); } } -} -// Account for admin bar -.admin-bar { - .givewp-donation-form-modal { - margin-top: 32px; - &__close { - top: calc(32px + 25px); - } + &__dialog { + max-height: inherit; + overflow-y: auto; } } From 6a44e8e2a3d5788c8c5b6fd2852f4d2ebd0cf7c5 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Thu, 5 Feb 2026 11:50:22 -0300 Subject: [PATCH 2/5] fix: move padding to dialog element --- .../shared/components/ModalForm/styles.scss | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss index 41244fd2e93..87c40d731a9 100644 --- a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss +++ b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss @@ -1,8 +1,7 @@ .givewp-donation-form-modal { outline: none; width: 100%; - padding: 1rem; - max-height: 90dvh; + max-height: 100dvh; position: fixed; top: 50%; left: 0; @@ -79,8 +78,8 @@ &__close { display: flex; position: absolute; - top: var(--givewp-spacing-2); - right: var(--givewp-spacing-2); + top: var(--givewp-spacing-4); + right: var(--givewp-spacing-4); padding: .75rem; width: fit-content; background: #e7e8ed; @@ -104,5 +103,24 @@ &__dialog { max-height: inherit; overflow-y: auto; + padding: 1rem; + } +} + +.admin-bar { + --admin-bar-height: 32px; + + @media (max-width: 782px) { + --admin-bar-height: 46px; + } + + .givewp-donation-form-modal { + &__dialog { + padding-top: calc(var(--admin-bar-height) + 1rem); + } + + &__close { + top: calc(var(--admin-bar-height) + var(--givewp-spacing-4)); + } } } From 0b790d4af022f59c0c76350b59eec2f43a37466a Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Mon, 9 Feb 2026 18:10:16 -0300 Subject: [PATCH 3/5] Revert "fix: move padding to dialog element" This reverts commit 6a44e8e2a3d5788c8c5b6fd2852f4d2ebd0cf7c5. --- .../shared/components/ModalForm/styles.scss | 26 +++---------------- 1 file changed, 4 insertions(+), 22 deletions(-) diff --git a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss index 87c40d731a9..41244fd2e93 100644 --- a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss +++ b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss @@ -1,7 +1,8 @@ .givewp-donation-form-modal { outline: none; width: 100%; - max-height: 100dvh; + padding: 1rem; + max-height: 90dvh; position: fixed; top: 50%; left: 0; @@ -78,8 +79,8 @@ &__close { display: flex; position: absolute; - top: var(--givewp-spacing-4); - right: var(--givewp-spacing-4); + top: var(--givewp-spacing-2); + right: var(--givewp-spacing-2); padding: .75rem; width: fit-content; background: #e7e8ed; @@ -103,24 +104,5 @@ &__dialog { max-height: inherit; overflow-y: auto; - padding: 1rem; - } -} - -.admin-bar { - --admin-bar-height: 32px; - - @media (max-width: 782px) { - --admin-bar-height: 46px; - } - - .givewp-donation-form-modal { - &__dialog { - padding-top: calc(var(--admin-bar-height) + 1rem); - } - - &__close { - top: calc(var(--admin-bar-height) + var(--givewp-spacing-4)); - } } } From 9664c9cf4b1644317b7f274e8b6f305d2580e918 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Mon, 9 Feb 2026 18:10:57 -0300 Subject: [PATCH 4/5] Revert "fix: enhance modal style on mobile" This reverts commit 8b1845c744dc12fee7bdd2c111fd1fce472b05dd. --- .../shared/components/ModalForm/styles.scss | 32 ++++++++----------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss index 41244fd2e93..705ebe0754a 100644 --- a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss +++ b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss @@ -2,15 +2,7 @@ outline: none; width: 100%; padding: 1rem; - max-height: 90dvh; - position: fixed; - top: 50%; - left: 0; - transform: translateY(-50%); - - @at-root body:has(&) { - position: relative; - } + overflow-y: scroll; &[data-entering="true"] { animation: modal-fade 300ms, modal-zoom 600ms; @@ -37,18 +29,17 @@ } &__overlay { - position: absolute; + position: fixed; top: 0; left: 0; width: 100vw; - height: 100%; + height: var(--visual-viewport-height); background: rgba(0 0 0 / .7); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; - overflow: hidden; &[data-loading="true"] { display: none; @@ -78,9 +69,9 @@ &__close { display: flex; - position: absolute; - top: var(--givewp-spacing-2); - right: var(--givewp-spacing-2); + position: fixed; + top: 25px; + right: 25px; padding: .75rem; width: fit-content; background: #e7e8ed; @@ -100,9 +91,14 @@ background-color: darken(#e7e8ed, 10%); } } +} - &__dialog { - max-height: inherit; - overflow-y: auto; +// Account for admin bar +.admin-bar { + .givewp-donation-form-modal { + margin-top: 32px; + &__close { + top: calc(32px + 25px); + } } } From 6586f8285c4461690415da0e5ca7fdee1af5ed24 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Mon, 9 Feb 2026 18:13:59 -0300 Subject: [PATCH 5/5] fix: replace "--visual-viewport-height" property with "100dvh" value --- src/Campaigns/Blocks/shared/components/ModalForm/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss index 705ebe0754a..e751302017b 100644 --- a/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss +++ b/src/Campaigns/Blocks/shared/components/ModalForm/styles.scss @@ -33,7 +33,7 @@ top: 0; left: 0; width: 100vw; - height: var(--visual-viewport-height); + height: 100dvh; background: rgba(0 0 0 / .7); display: flex; flex-direction: column;