Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: x scrollbar on "Sign In" modal #1919

Merged
merged 1 commit into from
Aug 18, 2022
Merged

fix: x scrollbar on "Sign In" modal #1919

merged 1 commit into from
Aug 18, 2022

Conversation

miguelpeixe
Copy link
Member

All Submissions:

Changes proposed in this Pull Request:

Fix horizontal scroll being rendered on the Sign In modal.

image

How to test the changes in this Pull Request:

  1. On master, open the Sign In modal and observe the horizontal scroll as displayed above
  2. Check out this branch and confirm the scrollbar is no longer there

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@miguelpeixe miguelpeixe added [Status] Needs Review The issue or pull request needs to be reviewed Reader Activation labels Aug 18, 2022
@miguelpeixe miguelpeixe self-assigned this Aug 18, 2022
@miguelpeixe miguelpeixe requested a review from a team as a code owner August 18, 2022 15:58
dkoo
dkoo approved these changes Aug 18, 2022
View reviewed changes
Copy link
Contributor

@dkoo dkoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not seeing the horizontal scrollbar or any element exceeding the modal, but this is probably a good idea regardless. Do you have any idea what's causing the overflow?

@github-actions github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Aug 18, 2022
@miguelpeixe
Copy link
Member Author

I couldn't pinpoint the exact reason, but it seems related to the overflow-y: auto; rule and webkit (Chrome/Safari). I couldn't reproduce it in Firefox.

@miguelpeixe miguelpeixe merged commit 08a7bb6 into master Aug 18, 2022
@miguelpeixe miguelpeixe deleted the fix/sign-in-modal-scroll branch August 18, 2022 16:30
@adekbadek
Copy link
Member

The reason is the new honeypot input field:

image

We could set its width to 0 to be have a less hacky solution. On the other hand, I can't think of a reason to not block y-overflow in that modal.

@dkoo
Copy link
Contributor

dkoo commented Aug 19, 2022

Aha, good find! I wasn't seeing this behavior because I'm using Firefox as my main dev browser. I think blocking the overflow is a good solution. 👍

@miguelpeixe
Copy link
Member Author

The .newspack-reader__auth-form__content input[type=email] width rule is overriding the width: 1px; from the visuallyHidden mixin

matticbot pushed a commit that referenced this pull request Aug 26, 2022
@semantic-release-bot
chore(release): 1.90.0-alpha.1 [skip ci]
d8664a4 
# [1.90.0-alpha.1](v1.89.1...v1.90.0-alpha.1) (2022-08-26)

### Bug Fixes

* **google-oauth:** missing email message ([#1925](#1925)) ([93260a3](93260a3))
* horizontal scrollbar on auth modal ([#1919](#1919)) ([08a7bb6](08a7bb6))
* if logging in from an overlay prompt, dismiss the prompt after login ([#1927](#1927)) ([999437d](999437d))
* post-logout messaging ([#1934](#1934)) ([11e6917](11e6917))
* register and auth form tweaks ([#1935](#1935)) ([3b76d3f](3b76d3f))
* **registration-block:** column layout in editor ([#1920](#1920)) ([f1ae0c5](f1ae0c5))
* show My Account messages using custom messaging instead of WC messaging ([#1932](#1932)) ([c9802fe](c9802fe))
* **stripe:** handle WC-originating Stripe transactions ([674b278](674b278))

### Features

* disable mailchimp-for-woocommerce plugin campaign tracking cookie ([#618](#618)) ([99310cb](99310cb))
* for donations via a prompt, add prompt ID to event label ([#1928](#1928)) ([4704cfd](4704cfd))
* honeypot trap for auth and registration forms ([#1896](#1896)) ([d5d713c](d5d713c))
* move have account text below SSO and adjust font-size ([#1917](#1917)) ([869913d](869913d))
* new option for minimum donation amount ([#1895](#1895)) ([0b9618b](0b9618b))
* reader account deletion and ESP sync options ([#1884](#1884)) ([b9fd209](b9fd209))
* **reader-activation:** check lists in auth modal by default ([#1933](#1933)) ([77bce1d](77bce1d))
* set from details for password reset emails ([#1926](#1926)) ([8b8607a](8b8607a))
* **stripe:** lookup stripe customer ID on registration ([#1860](#1860)) ([490cd97](490cd97)), closes [#1853](#1853)
* subscription metadata for ESP; Stripe webhook creation tweak ([#1859](#1859)) ([e094b15](e094b15))
* title and description for registration block ([#1924](#1924)) ([1c9fba6](1c9fba6))
* use reCAPTCHA to secure all Reader Activation-related forms ([#1910](#1910)) ([cc8ef79](cc8ef79))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.90.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Sep 14, 2022
@semantic-release-bot
chore(release): 1.90.0 [skip ci]
57c7066 
# [1.90.0](v1.89.1...v1.90.0) (2022-09-14)

### Bug Fixes

* **ac-master-list:** handle empty lists ([cfabb5a](cfabb5a))
* add check to only change theme if not empty ([#1978](#1978)) ([b9835f1](b9835f1))
* allow Register block to be edited even if RAS is not enabled ([#1962](#1962)) ([649f47b](649f47b))
* **emails:** don't create post if pluggable functions are not available ([#1979](#1979)) ([d8aac4f](d8aac4f))
* **emails:** editor message ([62dec52](62dec52))
* **google-oauth:** missing email message ([#1925](#1925)) ([93260a3](93260a3))
* horizontal scrollbar on auth modal ([#1919](#1919)) ([08a7bb6](08a7bb6))
* if logging in from an overlay prompt, dismiss the prompt after login ([#1927](#1927)) ([999437d](999437d))
* localized reader auth error messages ([#1948](#1948)) ([fb58a7f](fb58a7f))
* post-logout messaging ([#1934](#1934)) ([11e6917](11e6917))
* prefix WC My Account actions so we can decide which hooks to support ([#1963](#1963)) ([0fa8c0a](0fa8c0a))
* **reader-activation:** send payment contact metadata only if RA is enabled ([#1957](#1957)) ([3e14777](3e14777))
* register and auth form tweaks ([#1935](#1935)) ([3b76d3f](3b76d3f))
* **registration-block:** allow any markup in the success state ([977e77a](977e77a))
* **registration-block:** column layout in editor ([#1920](#1920)) ([f1ae0c5](f1ae0c5))
* **registration-block:** fix empty success state ([272aee5](272aee5))
* show My Account messages using custom messaging instead of WC messaging ([#1932](#1932)) ([c9802fe](c9802fe))
* **stripe:** handle WC-originating Stripe transactions ([674b278](674b278))
* **WooCommerce:** error notice text color ([#1954](#1954)) ([2e4b95f](2e4b95f))

### Features

* **ac-metadata:** send SSO provider name as "NP_Connected Account" field ([56b6597](56b6597))
* **ac-metadata:** send Stripe customer LTV as "NP_Total Paid" field ([5f6da59](5f6da59))
* after account deletion message ([2547b76](2547b76))
* **analytics:** prevent sending NTG newsletter event if subscribing to master list ([#1946](#1946)) ([806a8b0](806a8b0))
* custom messaging for reader without password ([#1965](#1965)) ([a584b59](a584b59))
* disable mailchimp-for-woocommerce plugin campaign tracking cookie ([#618](#618)) ([99310cb](99310cb))
* for donations via a prompt, add prompt ID to event label ([#1928](#1928)) ([4704cfd](4704cfd))
* give each registration form a unique ID ([#1953](#1953)) ([29fb515](29fb515))
* **google-sitekit:** prevent excluding logged-in users from GA if RA is enabled ([#1960](#1960)) ([3b18bcc](3b18bcc))
* honeypot trap for auth and registration forms ([#1896](#1896)) ([d5d713c](d5d713c))
* move have account text below SSO and adjust font-size ([#1917](#1917)) ([869913d](869913d))
* new option for minimum donation amount ([#1895](#1895)) ([0b9618b](0b9618b))
* reader account deletion and ESP sync options ([#1884](#1884)) ([b9fd209](b9fd209))
* **reader-activation:** check lists in auth modal by default ([#1933](#1933)) ([77bce1d](77bce1d))
* **reader-activation:** customizable account deletion, password reset emails ([#1938](#1938)) ([c121e5c](c121e5c))
* **reader-activation:** customizable verification email ([#1929](#1929)) ([d293701](d293701))
* **reader-activation:** handle global auth success in registration block ([debf5d2](debf5d2))
* **reader-activation:** improve password reset flow ([a05a9b6](a05a9b6))
* **registration-block:** hidden input for subscription ([#1949](#1949)) ([fc4f4d5](fc4f4d5))
* reorganise reader registration header section ([#1967](#1967)) ([f3f54e1](f3f54e1))
* set from details for password reset emails ([#1926](#1926)) ([8b8607a](8b8607a))
* **stripe:** lookup stripe customer ID on registration ([#1860](#1860)) ([490cd97](490cd97)), closes [#1853](#1853)
* subscription metadata for ESP; Stripe webhook creation tweak ([#1859](#1859)) ([e094b15](e094b15))
* title and description for registration block ([#1924](#1924)) ([1c9fba6](1c9fba6))
* update billing portal copy ([8040b80](8040b80))
* update reader-facing language on auth fail ([#1974](#1974)) ([a05ca37](a05ca37))
* update woocommerce account message/notice ([#1956](#1956)) ([db18b95](db18b95))
* use reCAPTCHA to secure all Reader Activation-related forms ([#1910](#1910)) ([cc8ef79](cc8ef79))
* use universal "from" email, customizable magic link email ([#1937](#1937)) ([3b269aa](3b269aa))
* Woo sync to ActiveCampaign ([#1968](#1968)) ([630b24e](630b24e))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.90.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dkoo dkoo dkoo approved these changes

Assignees

@miguelpeixe miguelpeixe

Labels
Reader Activation released on @alpha released [Status] Approved The pull request has been reviewed and is ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@miguelpeixe @adekbadek @dkoo @matticbot