another issue which is weird 😕 this time in the UI of the welcome screen. i changed the welcome (sign-in-up) screen layout a bit and saved. 2 things happened after refreshing my app: 1. the screen is no longer centered 2. the screen does not look the same. - the width is wrong, and bc of that the layout of the components inside the container is also wrong (they're stacked instead of showing up side-by-side like the email input and SSO button) 3. i verified that i'm using the right project ID (

P2N0NkQJV4DWgDP08Xwt8KacatMu

) in the code, and several times made changes in the welcome screen builder UI and made sure to click "Done" and "Save" after leaving. see video attached. am I missing something?

@few-holiday-24516 can you help here ?

Thanks for the feedback, we're looking into it.

fwiw, running with sdk version 1.0.3

@important-river-90900, it seems that you've set the container width to 31%, so in that sense this behavior seems normal. Did you experience any change from previous settings in the container? Can you reproduce a state whereas the container is centered?

Thanks Tomer! Not sure how I set it to that precise width. I did change the container’s width to accommodate the email input and button to be side by side. But I don’t think that the previous screen was wider. On the contrary. I’ll try to reproduce a centering of the container and will let you know if i succeed. But as for now I couldn’t fix it. As for the 2nd comment what I meant by the width is wrong is that the width of the outer container in the UI builder does not match what I see on my app. They are different width. And thus also I reckon the layout of the components changed.

Yes, it's clear. You can achieve the desired layout you described by adding another container and set inner components not to fill the container, like so:

hi @important-river-90900 just to make sure it’s clear - the ‘*Width*’ configuration of the container component (both the main one and other containers that you can add yourself from the components library) is defined by percentage (and not number of pixels). you can use the sizing option at the top of the screen to preview how it will look in different sized containers (such as the one you have in your app) - attached pictures below with how it looks. if you want to layer some of your components side-by-side, while the main container stays top-to-bottom, you should use a dedicated container and set its direction accordingly. we’re working on adding more documentation and materials around working with screens - and a version of this use case (horizontally layering components) is actually already included there 🙂 FYI @breezy-evening-56597 @salmon-night-88354

thanks @quiet-bird-99759, thanks. the layout indeed got sorted out, but the centering issue of the screen still remains.

@important-river-90900 i think that you need to reset the width to be 100% (it’s currently on 40%)

@important-river-90900 instead of changing the root container width, try to set it back to 100% and change the width of the

descope-wc

parent element for example:

thanks guys. @few-holiday-24516 - i can't change the elements in the shadow dom, so i'm not sure what you're suggesting. a snippet would be nice if you can provide. however, i did take your suggestion on setting the width to 100% of the root container, and then adding another container, with the desired width (40%) and moving all the elements inside it. then setting the background color of the root container to transparent, gave me the desired outcome. first screenshot is with alpha set to 20% to show the outline of the root container. the 2nd screenshot is with the BG alpha set to 0 to reach the desired centered effect. thank you @quiet-bird-99759 @gifted-florist-65280 and @few-holiday-24516 for the support