feat: add support for multiple predefined dialog sizes

[MarvinKlein1508]

🙋 Feature Request

This request is related to the v5 version. Since the Dialogs seem to get an entire overhaul I'd like to bring this feature request back up again.

I would highly appreciate if the FluentDialog can provide different pre-defined dialog sizes like bootstrap does.
https://getbootstrap.com/docs/5.3/components/modal/#optional-sizes

I'd like to show some larger tables within dialogs/modals and the default size is too small for me most of the time. Those sizes are also different for every different screensize. Especially on larger screens (>24inches) I'd like to use up more space to show more stuff.

In v3 you can specify the Width parameter of the DialogParameters however this only allows for one valid css value.

💁 Possible Solution

Control the width of the dialog by different CSS classes which can easily be overwritten. I really like the Bootstrap default sizes but it would be also nice to allow for custom size classes here (In my case I created custom classes for xxl (for 32inch screens) and fullscreen)

🔦 Context

This request is related to #2456

[dvoituron]

Yes, it's a good idea to be able to define the width, height and max-width and max-height values.

My first impression would be to have Class and Style attributes where we could set these values (or use predefined values as you suggested). But also to configure other UI styles.

[MarvinKlein1508]

The charm of pre-definded values would be that you can throw them into an enum, so you don't need to remember the class names. In case you want to provide a custom class you can always change CSS variabels within your custom class. I'm actually doing it manually in my projects right now like this:

/* Modals */
@media (min-width: 576px) {
    .modal {
        --dialog-width: 500px !important;
    }

    .modal-sm {
        --dialog-width: 300px !important;
    }
}

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        --dialog-width: 800px !important;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --dialog-width: 1140px !important;
    }
}

.modal-fullscreen {
    --dialog-width: 100% !important;
    --dialog-height: calc(100dvh - 2px) !important;
    --layer-corner-radius: 0 !important;
}