UI Master Detail dialog; Set the height of detail grid

Basic Building Blocks Series: Within the basic building blocks series over time I will add all the little things which someone who just starts with Serenity Framework would have to spend a lot of time figuring it out him/herself.

What you get with this article: While the master-detail feature of the Serenity Framework ist just great (thanks Volkan) and does a lot of the heavy lifting in the background, the default height of the detail grid often does not suit the specific requirements of an application. With this article, you can easily set the desired height of the detail grid as required.

Credits: Credits goes to Estrusco's answer within this SF issue: https://github.com/volkanceylan/Serenity/issues/1729

How to:

In order to set the height of the detail grid, you have to modify the CSS for the master dialog like this:

.s-Ressorts-RessortLayoutTransformationsDialog {
     > .size { width: 1200px; }
    .caption { width: 300px; }
    z-index: 1200;

    @media(min-width:768px) {
        .s-Ressorts-LayoutTransformationDetailsEditor > .grid-container {
            height: 300px;
        }
    }
}

(The relevant part starts with @media...)

Hint: Exchange the LayoutTransformationDetailsEditor with your XYZeditor.

That's it - folks.