I'm trying to add a reCaptcha validation using react-google-recaptcha. Works fine but the widget is visually cut off in Chrome and I'm not sure how to fix it. Firefox renders the widget correctly.
I tried messing with the style (width, height, transform) and nothing worked.
Looks fine in Firefox:
But it breaks in Chrome
Code is here, there's nothing to it. Just using the most basic example. I tried both size options ('normal' and 'compact') and it didn't help either.
import React from 'react';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import './App.css';
import LogInForm from "./pages/user/LogInForm";
import Home from "./pages/home/Home";
import ReCAPTCHA from "react-google-recaptcha";
function App() {
return (
<Router>
<Routes>
<Route path="/login" element={<LogInForm/>}/>
<Route path="/captcha" element={<ReCAPTCHA
sitekey="site key here"
/>}/>
<Route path="/" element={<Home/>} />
</Routes>
</Router>
);
}
export default App;
Any ideas on how to fix this? Or maybe some workaround?