Fix reCaptcha position in reveals

Currently if a recaptcha (v2) in a Reveal is active it is not visible and therefore can't be submitted. This fixes it.
Only tested with the Formidable Forms Plugin, but should be an issue with all implementations.

src/assets/js/app.js

@@ -21,6 +21,7 @@ import './components/iconlist';
 // import FA last, to kick off the process of finding <i> tags and
 // replacing with <svg> tags, after importing all components.
 import './lib/FontAwesome';
+import './lib/reCaptcha';
 
 // because jQuery is included with webpack.ProvidePlugin we can
 // just use jQuery and $ variables without importing it again.

src/assets/js/lib/reCaptcha.js

@@ -0,0 +1,10 @@
+function fixReCaptchaPosition() {
+	jQuery('body > div > div > iframe[src^="https://www.google.com/recaptcha/"]')
+		.parent()
+		.parent()
+		.addClass('recaptcha-wrapper');
+}
+
+setInterval(() => {
+	fixReCaptchaPosition();
+}, 250);

src/assets/scss/global/_global.scss

@@ -11,3 +11,9 @@
 .full-width {
 	@include full-width;
 }
+
+/* fix recaptcha position in reveals */
+.is-reveal-open .recaptcha-wrapper {
+	position: fixed !important;
+	z-index: 99999;
+}