How to add css classes for Dialog to render different sizes with media queries

[thieng101]

Per title. My code is currently looking like this:

Component.razor

<FluentButton Appearance="Appearance.Accent" OnClick="@OpenAsync">Open dialog</FluentButton>

<p>Name: @DialogData.Name - Age: @DialogData.Age</p>

Component.razor.cs

{
    public record NameAndAge
    {
        public int Id { get; set; }
        public string? Name { get; set; }
        public int Age { get; set; }
    }

    NameAndAge DialogData { get; set; } = new() { Id = 1, Name = "Bill", Age = 42 };

    private async Task OpenAsync()
    {
        // Create a new instance of DialogData
        // to allow the user to cancel the update
        var data = DialogData with { Id = 1 };

        var dialog = await DialogService.ShowDialogAsync<SimpleCustomizedDialog>(data, new DialogParameters()
            {
                Height = "240px",
                Title = $"Updating the {DialogData.Name} sheet",
                PreventDismissOnOverlayClick = true,
                PreventScroll = true,
            });

        var result = await dialog.Result;
        if (!result.Cancelled && result.Data != null)
        {
            DialogData = (NameAndAge)result.Data;
        }

    }
}

I want to change the Height of the Dialog from "240px" to a smaller height if the window size gets smaller using media queries. But I don't know how to do that. I'd very appreciate any help!

[vnbaaij]

II added a class to the dialog in one of the demos like this: