The Sign-In Widget enables registration, enrollment, verification, and recovery experiences for users. The third generation of the Sign-In Widget (3rd Gen SIW) offers the same user experience as the second generation and adds accessibility improvements in color contrast, focus management, and screen reader behavior.

However, cosmetically, there are some differences between the 2nd and 3rd Generation Sign-In Widget window size and screen position. These can be seen in the side by side comparisons below (the images are relatively aligned - The Gen 2 is on the left and the Gen 3 on the right).

  

• 3rd Generation Sign-In Widget (3rd Gen SIW)

This is working as expected. Okta made a conscious decision to rewrite the SIW from the ground up on a modern stack with a more modern look and to include accessibility improvements.

For more information on the 3rd Gen SIW and accessibility features, please refer to the product documentation: Sign-In Widget (third generation).  

Customers can control their branding and customize styles to meet their requirements. For more information, please refer to the Use the code editor developer documentation.

NOTE: Customers will need to use a custom domain and have access to the custom code editor (see Configure a custom domain).

In the context of the relative Window position, the simplest solution for this issue would be to set a negative margin-top on the main SIW container element. The current margin-top value is 100px, so it is possible to target the #okta-sign-in ID of the root container and input the negative margin of choice (See example below).