[BUG] Wrong display when no content

[Safranil]

Describe the bug When the content in main.app-main is not long enough or without explicit size, the layout is broken on small screen.

After some digging, this is because .app-wrapper have grid-template-columns: auto 1fr;, the auto get the content size wrong in this case.

Patch

.app-main-wrapper {
  @include media-breakpoint-down(lg) {
    width: 100vw;
  }
}

Screenshots Before the patch:

After the patch:

Environment (please complete the following information):

• AdminLTE Version: 4.0.0-beta1
• Operating System: Debian 12
• Browser (Version): Firefox 115.13.0 ESR

[danny007in]

can you create PR for this if possible

[danny007in]

i am unable to rectify error can you please provide html source of it

[danny007in]

https://app.netlify.com/sites/adminlte-v4/deploys in preview which page can i get this error

[jongbonga]

@danny007in I get the same issue on with fixed complete layout. When sidebarBreakpoint < 992, with no or little content.

You can reproduce here by closing the accordion

[danny007in]

issue clear v4.0.0-beta2

[jongbonga]

issue clear v4.0.0-beta2

Should we replace the fixed layout with the custom-area layout instead?

[danny007in]

issue clear v4.0.0-beta2

Should we replace the fixed layout with the custom-area layout instead?

please replace with fixed sidebar layout