Right sidebar does not show on smaller screens and ignores Responsive attribute

[LostBeard]

Describe the bug There are 2 issues with right sidebar. Both issues show themselves when the window width is reduced. (window.innerWidth < 769px on my PC)

• The right sidebar ignores Responsive="false" attribute and still auto-hides when window width is reduced.
• The right sidebar does not show even when the bound Expanded boolean value is set to true when window width is reduced. (This occurs even if the Responsive attribute is not set.)

To Reproduce Steps to reproduce the behavior:

1. Go to RadzenRightSidebarBug Demo
2. Reduce the window width until the right sidebar auto-hides. This is bug. It should not auto-hide as Responsive="false" is set.
3. Click on hamburger button (3 horizontal lines) that is suppose to show/hide the right sidebar. It does not show. This is another bug.

The demo is a clean .Net 8 "Blazor WebAssembly Standalone App" with the following changes:

• Added Radzen.Blazor Nuget version 4.33.2
• Added <script> and <link> tags to index.html as described in Getting Started
• Replaced MainLayout.razor contents with Right Sidebar Example
• Added Responsive="false" to RadzenSidebar in MainLayout.razor (Only needed to demonstrate that it ignores this attribute. Other issue occurs regardless of this attribute.)

Demo repo: RadzenRightSidebarBug

Expected behavior I expected the Responsive="false" attribute disable auto-hiding of the right sidebar on smaller screens like it does with the left sidebar, as described in the documentation.

I also expected the right sidebar to show when the Expanded parameter value is set to true even when on smaller screens.

Screenshots [NONE]

Desktop (please complete the following information):

• OS: Windows 10 64bit
• Browser: Chrome 126.0.6478.127 (Official Build) (64-bit)
• Version: Radzen.Blazor version 4.33.2
• Blazor WebAssembly .Net 8.0.6 (.Net SDK 8.0.302)

[akorchev]

The problem is actually in RadzenBody:

@media (max-width: 768px) {
    body:has( > .rz-layout) {
        overflow-x: hidden;
    }

    .rz-header, .rz-footer, .rz-body {
        width: 100vw; // <- always
    }
}

Try <RadzenBody style="width: auto">. Probably we need a more specific CSS rule which accounts for sidebars cc @yordanov

[LostBeard]

Try <RadzenBody style="width: auto">.

Excellent. The right sidebar works as expected after adding that. Thank you for such an amazingly quick and helpful reply.

[LostBeard]

Your recommendation solves the issue for me. You may close this issue at your discretion.