Feature Request: Expand Responsive design to Dialog Contents

[Anspitzen]

Is your feature request related to a problem? Please describe.
When Having a nice responsive design for a component this does only work for full viewport, which a Dialog seldom uses fully. So Responsive Breakpoints are handled as if the Component would be rendered by a FAR wider window

Describe the solution you'd like
The Breakpoints used (SizeSM / SizeLG / OrderMD ...) are in relation to the DialogContent Width, not the full Browser Viewport

Describe alternatives you've considered

• Making the Dialog Width = "100vw"
• Adjusting displayed Component(s) in the Dialog to be generally for smaller display

[yordanov]

Hi @Anspitzen,

I guess you’re suggesting using container queries instead of media queries for responsive layouts in RadzenDialog? I’m a bit hesitant since the same properties could behave differently in different scenarios — maybe it would make sense to define new ones? Could you share specific scenarios or components where you think this approach would be most useful?

[Anspitzen]

Lets say I have a Component loading some Tags with their description from a Database for selection as nice bubbles
On a wide monitor I would like to have the bubbles in three Columns, on a slim screen (mobile, or vertical Tablet, a Vertical Monitor etc) I would like to habe them in only one column.
So I take something like

<RadzenRow>
    @foreach (var data in List)
    {
        <RadzenColumn Size="12" SizeSM="4">
            <DataDisplayComponentOrStraightWriteup Data="data" />
        </RadzenColumn>
    }
</RadzenRow>
@code{
    List<mydata> List = new List<mydata>();
    protected override async Task OnInitializedAsync(){
        List = await MyDatabaseService.GetDataFromDatabase();
    }
}

For any @page("") Component works perfectly, but if I now open that Component in a Dialog (lets say Side Dialog) it still tries to render the full three columns, even if the dialog was smaller than the slim screen (here the SM = <768px).

So yes, something like container queries. Maybe by setting a Parameter on the component "ContainerResponsive" to mark a Component to take its Size/Order etc. Breakpoints from the DialogContainer and not like usual from the Viewport? For any existing it would be behaving like normal, if you set the parameter it is responsive to the parent div.