Fix div overlapping link making it unclickable.

[elliottprogrammer]

Proposed Changes

Prior to this PR, there was a div that was overlapping the "licensing activation banner" in which there is a link that says, "Activate it now" that was not working because the overlapping div stacking context was covering up the link and preventing any pointer events on the link.

A quick fix is just a 1 liner CSS property/value, adding css: pointer-events: none; to the <div class="header__content-wrapper"> ... </div> (the div that is overlapping the licensing activation banner)

Asana task: 1203495437860512-as-1203698368270970/f

Testing Instructions

Prerequisites:

• You'll need a un-activated product license key.
• If you don't have one:
  • Go to https://jetpack.com/
  • Scroll down the page a bit until you see the 3 product cards (Backup, Security, Complete). Click on "Get Backup" and purchase it on the checkout page.
  • On the 'Thank you' page, it's asking you to select a site you want to apply the license to. Do Not select a site. Rather select the dropdown and choose, "I don't see my site, let me configure it manually".
  • You now should have an unattached product license key.

---

Test

• Do any one of these
  • Click on Jetpack Cloud live link below and wait for the redirect to complete, then goto /pricing/:site (:site is the site-slug of a jetpack site you own, or a Jurassic Ninja site you created and connected.) (This is probably the quickest and easiest way to test this PR).
  • or run this PR
    • Run git fetch && git checkout fix/div-overlapping-links
    • Run yarn start-jetpack-cloud (it takes a little while to build the application)
    • Goto http://jetpack.cloud.localhost:3000/pricing/:site (where :site is the site-slug of a jetpack site you own, or a Jurassic Ninja site you created and connected.)
• You may be prompted with a dialog/modal notifying you that you have an available license key. Close (X) the dialog/modal. Then Notice/verify you see a black horizontal banner, notifying you the same, that you have an available license key. It will have an underlined link that says, "Activate it now".
• Hover over the "Activate it now" link and verify you cursor turns into a pointer. Verify you can click the link and it works! 🙂

• At various other viewport widths, all the way to mobile, verify that the 2 sticky banners are working correctly and verify that the "Activate it now" link is working properly and the cursor turns into a pointer when hovering the link
• Now just to see the bug, prior to this PR, you can go to https://cloud.jetpack.com/pricing/:site (Make sure you are proxied and logged in to your wordpress.com account). You're going to preform the same steps as above (except this time on the regular https://cloud.jetpack.com website in the "Staging" environment (logged-in A18N using the A8C Proxy)
• Go to https://cloud.jetpack,com/pricing/:site (where :site is the site-slug of a jetpack site you own (or Jurassic Ninja site)).
• If you see the modal/dialog, go ahead and close it (X).
• Hover your mouse over the "Activate it now" link (in the black banner), and see/verify that your mouse pointer does not change and that you cannot click the "Activate it now" link.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-ddf84b45ce83f320a4acde52c5e3eba441a3b8fb

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-ddf84b45ce83f320a4acde52c5e3eba441a3b8fb&env=jetpack

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[andrii-lysenko]

LGTM!