Gridstack layout misalignment on initial load after OIDC login in Angular

[jitendra-786]

Subject

We are experiencing layout misalignment in the Gridstack component when navigating to the dashboard after an OIDC login in Angular.
OpenID Connect (OIDC) in the Angular application is causing a misalignment in the Gridstack layout (height) on first load and again if I refresh the same page working fine.

##environment

• version of gridstack.js - "gridstack": "^10.3.1",
• which browser/OS Chrome and windows 11

Steps to reproduce

Log in using OIDC authentication.
After successful login, OIDC redirects to the callback component.
From the callback component, navigate to the dashboard with the Gridstack layout.
Observe that the layout is misaligned (height or positioning issues).
Refresh the page and see that the layout displays correctly.

callback.component.html and callback.component.css is empty

Video.Project.19.mp4

Expected behavior

"layout should display correctly on the first load after OIDC login"

[adumesny]

this isn't a 'bug' I can act on, nor is it the lib itself. from the video looks like a timing issue and not loading the CSS to render widgets correctly. Might want to play with inserting the GS css into the main app. I use project.json, demo uses angular.json "styles": [] to important GS css instead of components...

        "styles": [
          "node_modules/gridstack/dist/gridstack.min.css",
          "node_modules/gridstack/dist/gridstack-extra.min.css",
          "projects/demo/src/styles.css"
        ],

don't forget to donate if you find this lib useful!