I want to add a container around my Descope-generated login window. This is the code that I'm using and it doesn't work. Do you have any idea how to make it work? <div className="container"> <Descope flowId="sign-in" onSuccess = {(e) => { console.log(e.detail.user.name) console.log(e.detail.user.email) }} onError={(e) => console.log('Could not log in!')} /> </div>

Hi, need to set style on the

container

class

Sure, that was the style that I added: .container { border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; background-color: #FFFFFF; max-width: 500px; /* Set a maximum width for the container */ margin: 0 auto; /* Center the container horizontally */ }

see for example how the react-sdk sample app limits the container width https://github.com/descope/react-sdk/blob/main/examples/app/App.tsx#L10

Thanks. Looks very cumbersome. Isnt it possible to do it with wrapping the Descope login form with a <div className="container"> ?

it is possible, and should work, need to debug the sizes in the browser dev tools to see why the style is not apply try to check in the CSS definitions

Do you have any example where it does work?

https://github.com/descope-sample-apps/b2c-retail-sample-app/blob/2280b0540b1268d96e624c9e01ff0e85a8c95df1/src/components/login/login.css#L30 which deployed here https://www.tee-hee-tees.store/login

Fixed. thanks!