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.

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

Allow scrolling of grant captcha overlay in rewards panel #10315

Merged
merged 1 commit into from
Sep 30, 2021

Conversation

zenparsing
Copy link
Collaborator

@zenparsing zenparsing commented Sep 29, 2021

Resolves brave/brave-browser#18436

Currently, overlays implemented using modal.tsx use fixed positioning to cover the window and center the overlay. This change adds overflow: auto to the window-covering element so that overlays that are larger than the current window size can be scrolled.

Submitter Checklist:

  • I confirm that no security/privacy review is needed, or that I have requested one
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

Programmatically simulating a constrained panel

I have not yet been able to find display settings that will cause the grant captcha UI to extend outside of the panel area. However, this situation can be simulated by programmatically reducing the size of the panel in the developer console:

  • Open the rewards panel.
  • Right-click in the rewards panel and click "inspect".
  • In the developer tools, switch to the Console tab and execute the following JS:
document.getElementById('root').style.height = '400px';
document.getElementById('root').style.overflow = 'auto';

Scenario: Solving captcha when rewards panel is constrained

  • Given that the user has enabled rewards
  • And has an Ad or UGP grant available
  • And the rewards panel is space-constrained (see steps above for simulating a constrained panel)
  • When the user attempts to claim the grant
  • Then scrollbars should appear
  • And scrolling should affect the viewable area of the captcha
  • And the user should be able to solve the captcha.

@zenparsing zenparsing force-pushed the ksmith-captcha-scrollbars branch from d52f1af to a3e2b36 Compare September 29, 2021 19:13
@zenparsing zenparsing merged commit 346d029 into master Sep 30, 2021
@zenparsing zenparsing deleted the ksmith-captcha-scrollbars branch September 30, 2021 15:14
@zenparsing zenparsing added this to the 1.32.x - Nightly milestone Oct 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Grant captcha in rewards panel is not scrollable
3 participants