Fix partially hidden grant captcha drag and drop target image

[zenparsing]

Resolves brave/brave-browser#7597
Resolves brave/brave-browser#7147

Currently, when the grant captcha title text spans more than one line the drag-and-drop target image can extend below the bottom border of the rewards extension popup. This is because the GrantWrapper is an absolutely positioned overlay (rendered on top of the wallet UI), and absolutely positioned elements without explicit height to not grow the height of their parent.

This change modifies the rewards extension so that GrantWrapper is relatively positioned and the wallet UI is not rendered at the same time. GrantWrapper is also used in the promotions component of the settings page; in order to avoid layout changes there, a new style prop, overlay (boolean) has been added to the component which will cause it to be absolutely positioned.

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protection-Mode
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

BR Panel

• Launch Brave with a clean profile and --rewards=staging=true
• Open BR panel, join rewards, and click "Claim"
  • Verify: draggable BAT logo is centered and drop tagets are visible
• Right-click the "Prove that you are human" text and select "Inspect"
• In DevTools, double-click the "Prove that you are human text" to edit
• Add a long string of many words to the text
• Press the TAB button to display the change
  • Verify: the size of the panel has grown to accomodate the additional text
• Solve the catcha image
  • Verify: the confirmation UI is displayed correctly

BR Settings Page

• Launch Brave with a clean profile and --rewards=staging=true
• Navigate to brave://rewards and join rewards
• Click the "Claim" button
  • Verify: the captcha UI is displayed correctly
• Solve the captcha
  • Verify: the confirmation UI is displayed correctly

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.