Mobile stacked mode applies same row height to all panels based on SizeY instead of respecting rendered content height - Branched from 197784

[Lee Stevens]

I understand what you do but I'm saying it just isn't responsive and you need 2 x layouts for desktop and mobile.
Of course if you pick a simple 1x2 example it will always work however if you use this example it does not look great.

I think you do need to code for both mobile and desktop and have different layout models for the mobile, unless I am missing something? Such as for the below you would have SizeY = 3 when in mobileview 

@using Syncfusion.Blazor.Layouts

<SfDashboardLayout CellSpacing="@(new double[]{20 ,20 })" Columns="12"

MediaQuery="max-width:200px">

    <DashboardLayoutPanels>      

        <DashboardLayoutPanel SizeX=10 SizeY=10>

            <ContentTemplate><div>1</div></ContentTemplate>

        </DashboardLayoutPanel>        

    </DashboardLayoutPanels>

</SfDashboardLayout>

<style>

    .e-panel-content {

        text-align: center;

        margin-top: 10px;

    }

</style>

[Praveen Sellappan]

Hi Lee Stevens,

Thank you for reaching out. The Blazor Dashboard Layout component includes built-in responsive behavior, automatically adjusting panels based on the size of their parent container. This means you don’t need to manually configure different dashboards for various screen resolutions.

For smaller screens, the Dashboard Layout automatically transitions to a stacked view, displaying panels in a single vertical column. By default, this change occurs at 600px or below. If needed, you can customize this breakpoint by setting the component’s MediaQuery property to match your preferred resolution.

we’ve prepared a sample where a button allows you to switch between desktop and mobile layouts:

• A single SfDashboardLayout instance is used.
• Only the set of DashboardLayoutPanel items is conditionally rendered.
• The desktop panel arrangement is shown by default, clicking “Mobile” switches to the mobile arrangement.
• Different column counts are used for desktop and mobile to better fit each form factor.

Regards,
Praveen Sellappan

Attachment: dashboard_37baf50d.zip